0

Ok, so, i have a component that takes a className as a prop, but the component itself comes with an default style.

 className={`${
    props.classNameStyle ? `${styles.defaultButtonStyle} ${props.classNameStyle}` : styles.defaultButtonStyle
  }

If className prop exists, it should put as classes both the default class and the class passed as prop, and otherwise, to put just the default class. It works, but, i want the class passed as prop to have a bigger CSS specifity than the default button, because, let's say that we have :

.defaultButtonStyle { background-color:red }

and

.classNameStyle { background-color:blue } (this is the class from props)

it should make the background color blue, but in the browser's console, the classNameStyle it's cut, and the background-color is set to the default button style. I don't want to use !important, because that's gonna be annoying for the user. Any ideas?

Mares Gabriel
  • 11
  • 2
  • Does this answer your question? [How to specify the order of CSS classes?](https://stackoverflow.com/questions/1321692/how-to-specify-the-order-of-css-classes) – Mr. Hedgehog Mar 09 '21 at 18:52
  • not really, i doesn't – Mares Gabriel Mar 09 '21 at 19:07
  • Nothing specific to React here, but just general css specificity. See https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2 In general, you likely want to increase specificity via nesting in your css file, e.g. `.my-page .classNameStyle { background-color: blue; }` – Eric Haynes Mar 10 '21 at 01:55

0 Answers0