How to nest classes in css modules and react?
An alternative solution which better preserves the nested classes and styling is to use the global scope :global
on all the nested classes when using a preprocessor like sass or less.
.header {
:global {
.menu {
display: none;
&.menu-visible {
display:block;
}
}
}
}
<div className={styles.header}>
<div className="menu menu-visible">
Whatever
</div>
</div>
I solved it. I think that I just overdid it in my mind. Instead of writing styles.header.menu
I could just write styles.menu
, even if it was nested.
Example (React + JSX):
<div className={styles.header}>
<div className={styles.menu}>
Whatever
</div>
</div>
.header {
.menu {
display: block;
}
}