Customize a Button without !important

WHAT THIS TESTS Whether you provide an intentional styling API so consumers can customize cleanly, instead of escalating the specificity war with !important.

A GOOD ANSWER COVERS The best override mechanism is a designed-in one. Expose CSS custom properties as the button's styling API: define internal styles in terms of properties like --btn-bg, --btn-color, and --btn-radius with default values, so a consumer restyles the button simply by setting those properties in their own scope, on the marketing page wrapper. The custom property cascade naturally overrides without specificity conflicts. Also accept a className and style prop so callers can attach their own classes or inline overrides. Keep the component's internal selectors at low specificity, single class selectors, so a consumer's class can override without needing !important. For deeper structural styling, expose part attributes or slots. Together these give a clear contract for customization while keeping the core component untouched.

COMMON WRONG ANSWERS Using !important to force the new look starts an escalation that the next override must also escalate, producing unmaintainable CSS. Writing deeply nested high-specificity overrides is fragile. Editing the core component for one page pollutes the shared system. Inlining styles everywhere loses the design system contract.

LIKELY FOLLOW-UPS Why do custom properties avoid specificity wars? They are resolved by the cascade as values, not competing selectors. How do you prevent override abuse? Document which properties are public API. What about Shadow DOM? Use ::part and exposed custom properties to pierce it.

ONE CONCRETE EXAMPLE The Button sets background var(--btn-bg, defaultColor). The marketing page wraps the button in a container that sets --btn-bg to a gradient-friendly color and a larger --btn-radius. The button picks up the new values through the cascade, with no !important, no edits to the shared Button, and the customization scoped only to that single marketing page.