Classes are not being over written
pike-kwc opened ·
I have this scss: ``` .primary { @include button; color: #FFF; background-color: #FF5A5A; &:hover { background-color: #FF2E40; } } .outlined { @include button; border: 1px solid #2156FA; color: #2156FA; background-color: #FFF; &:hover { color: #FFF; background-color: #2156FA; } } ``` and I try to use this with clsx: ``` className={clsx( type === 'outlined' && cls.outlined, color === 'primary' && cls.primary, color === 'secondary' && cls.secondary, )} ... other place ... <button color="primary" type="outlined"/> ``` it generates the outlined class and the primary class, but outlined always wins over primary for background-color. (yes I need to rework the css to use variables, I know)
I would assume that if primary comes after outline, primary should win, but it doesn't. Any combination with outline, and it always wins Maybe I'm using it wrong? please let me know.
- LU
this is nothing to do with clsx
this is plain CSS mechanics. Your `.outlined` class is defined/loaded in the stylesheet after the `.primary` rules. This means those rules take precedence.
For example:
```html <style> .red { color: red } .blue { color: blue } </style>
<div class="blue">blue text</div> <div class="red">red text</div>
<div class="red blue">blue text</div> ```
You can define more rule combinations after so that they take precedence; eg adding `.primary.outlined { ... }` rules.
Here's the variable approach:
```css .button { --c: black; --bgc: lightgray; --bdc: transparent; color: var(--c); background-color: var(--bgc); border: 1px solid var(--bdc); }
.primary { --c: white; --bgc: blue; --bdc: blue; }
.outline { color: var(--bgc); border-color: var(--bgc); background-color: transparent; } ```
> [View Demo](https://codesandbox.io/s/hungry-snowflake-qujdc0)
- PK
Ah I see thanks! I completely forgot to check the stylesheet and wrongly assumed that clsx would reorder them (more like css in js) rather than just applying the classes from the built stylesheet.