Scss in Next without modules?
Surprisingly difficult to find an answer for this when i was googling. Here's the situation as ive been taught in previous jobs:
Say i have a component <MyComponent /> and i expect some default styles for this, defined in a mycomponent.scss file like:
.MyComponent {
background-color: red;
border-radius: 10px;
}
But say the component takes some various props, and I add a disabled state, to be defined like:
.MyComponent {
background-color: red;
border-radius: 10px;
&.disabled {
background-color: white;
}
}
I want to just import this css with the mycomponent.tsx files and have something that correctly sets className based on which props I used.
With css modules, it appears(?) I can't do that? The instructions are to label the disabled class like &disabled {} (inside mycomponent.module.scss now),
and then use className={styles.MyComponentdisabled}. But this seems to ONLY apply the disabled styles, (i.e., no border-radius is set anymore), which seems like it makes the css class hierarchy useless.
The only other option i can find is to just import mycomponent.scss in the root of the app. But that can't possibly be how you're supposed to be using css in next right? I would end up with like 50 scss file imports in the root component which seems like a waste of bundle and also just shit developer experience. Can someone explain how this is supposed to work? Thanks ❤️4 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
this works if disabled is a subclass of MyComponent, i.e.
.MyComponent {
background-color: red;
border-radius: 10px;
&.disabled {
background-color: white;
}
} ?Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
🐐 thank you!