Don't fight your classes

Needing overrides means the component design is wrong.

Adam Wathan@adamwathan

@kossnocorp I have never in my life needed to override class names. Still baffles me this is something people constantly reach for. Feels like a component design problem to me.

Sep 3, 2026View on X ↗

Adam Wathan@adamwathan

@kentcdodds Pre-styled UI libraries that come with a bunch of CSS and tons of classes you need to nimbly navigate and override are such a pain. in. the. ass.

Dec 18, 2017View on X ↗

Adam Wathan@adamwathan

"Hey I see you have a very specific approach you like to use to style your apps, great! To use this library, all you need to do is introduce a completely different naming convention into your CSS, make careful use of overly specific child selectors, and you're off to the races!"

Apr 3, 2018View on X ↗

Specificity is computed from each selector; the result is read from the DOM.

Recolor the button

Press Try override until the button turns green.

Override the libraryBad

Accept propsGood

function Button({ tone = "neutral", className, ...props }) {
  return (
    <button
      className={cn("rounded-md px-3 py-1.5 text-sm", TONES[tone], className)}
      {...props}
    />
  )
}

<Button tone="success">Deploy</Button>

Why it matters

If a change needs a fight, the component hid the decision. Expose it as a prop or class.

Pros

A restyle is one line, with no specificity to reason about
No !important escalation to maintain
Callers can extend the component with their own classes

Cons

You design the props and the variants
Deeply nested parts need slots or extra props
A prop-less library is quicker to adopt at first

Recolor the button

Why it matters, pros and cons

Why it matters

Pros

Cons