Overriding styles

Why your CSS always wins, without !important.

Zero specificity

Every library selector is wrapped in :where(), which has specificity zero. So a single flat class of your own outranks it.

css

/* the library ships this */
:where(.vk-button[data-variant="solid"]) { background: var(--vk-color-primary); }

/* yours wins, with one class and no !important */
.my-cta { background: #db2777; }

<Button className="my-cta">Beats the library</Button>

className and style are merged

Never replaced. Every component keeps its own classes and adds yours, and forwards its ref to the root DOM node.

<Button className="mine" style={{ marginTop: 8 }} />
// renders: class="vk-button mine" style="margin-top: 8px"

Variants are data attributes

There is no class-name concatenation to reverse-engineer. Target the attribute.

css

.vk-button[data-variant="outline"][data-size="lg"] { letter-spacing: 0.02em; }

vk- class names and --vk- custom properties are public API. Renaming one is a major version bump.

Back to the introduction