#[SOLVED] How to override theme with CSS modules?

5 messages · Page 1 of 1 (latest)

limber ore
#

We have some default theme CSS for e.g. Mantine's <Button>, but when we try to override the theme with a specific *.module.css file, the theme takes precedence due to CSS specificity. Is there a way to go avoid this. Otherwise, we have to make super specific selectors in our CSS module files.

e.g.

button.selected[data-variant='secondary'] {
  background-color: var(--mantine-color-black);
  color: var(--mantine-color-white);
}

We want this to work:

.selected {
  background-color: var(--mantine-color-black);
  color: var(--mantine-color-white);
}
pale breach
limber ore
#

we tried that and :is() in the Theme.module.css file, didn't work

pale breach
limber ore
#

thank you, this worked!
we just wrapped the whole "ThemeButton.module.css" inside @layer base

@layer base {
  .root {
    &[data-variant='primary'] {
      background-color: var(--mantine-color-yellow-4);
      border-color: var(--mantine-color-yellow-4);
      box-shadow: 0 2px 4px rgba(0, 0, 41, 0.3);
      color: var(--mantine-color-black);
    }
...
}