I'm in the midst of working on a Next.js project and experimenting with SCSS/SASS for my styling needs. I'm currently grappling with how to streamline the process of applying class names.
Here's the issue at hand:
Within one of my components, I have the following setup:
import styles from './component.module.scss';
const Component = () => {
return (
<div className={styles.container}>
<div className='content'>
...
</div>
</div>
);
}
What I desire is to have a straightforward .scss file like this:
.container {
background-color: red;
.content {
background-color: blue;
}
}
While the .container class functions as expected, implementing .content necessitates changing the class name of the second div to {styles.content} instead of simply content.
My question is: Is it possible to exclusively use styles.CLASS in just the parent div of the component without having to apply it to every nested child div?