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>

The :global scope operator tells the CSS Modules compiler to leave all the class names defined within it as they are, that way you don't need to also inject those nested class names into the component. Using :global does break from the original intention of CSS Modules and you may find that any separate child component styling can now get affected by the globally scoped classes. A more detailed explanation of the :global scope operator can be found at https://stackoverflow.com/a/52895247/4387229

You can use [class~=classname]

.header {
   [class~=menu] {
      display: block;
   }
 }

which will not be detected as a class and left alone.

Note that the solution in the accepted answer can lead to a significant increase in your css bundle size when deep nesting selectors.

Accepted solution with 1 more level of nesting

JSX:

<div className={styles.header}>
  <ul className={styles.menu}>
    <li className={styles.item}>
      Whatever
    </li>
  </ul>
</div>

SCSS:

.header {
   .menu {
      .item {
        display: block;
      }
   }
 }

Output (assuming default settings for css modules):

.myComponent_header__27ep6 .myComponent_menu__32Qvy  .myComponent_item__2RWLN {
  display: block
}

Alternative solution

A better way of writing it would be to borrow loosely to the BEM methodology and use the parent selector :

JSX:

<div className={styles.header}>
  <ul className={styles.headerMenu}>
    <li className={styles.headerMenuItem}>
      Whatever
    </li>
  </ul>
</div>

SCSS:

.header {
   &Menu {
     &Item {
       display: block;
     }
   }
 }

Output:

.myComponent_headerMenuItem__37djq { display: block }

I don't know if it will help but i found the way as follows:

file: package.json

"dependencies": {
  ...,
  "sass": "^1.49.9"
}

file: test.scss

.box {
    width: 100%;
}

.boxItem {
    background: red;

    &.first {
        background: blue;
    }

    &.second {
        background: silver;
    }
}

file test.js

import React from 'react'
import styles from "./test.scss";

const test = () => {
  return (
    <div className={`${styles.box}`}>
      <div className={`${styles.boxItem} ${styles.first}`}>Test 01</div>
      <div className={`${styles.boxItem} ${styles.second}`}>Test 02</div>
      <div className={`${styles.boxItem}`}>Test 03</div>
    </div>
  );
};

export default test;

Not quite sure why the horrendous hack above is the accepted answer. Maybe it's worked for someone in some odd context.

1. the code posted doesn't work
2. this fundamentally breaks the 'C' in CSS! Now it could be successfully argued that css modules are themselves breaking the 'cascading' nature of CSS, but equally, its goal is to limit the cascade to a certain scope...which as we can see from the question and its various 'solutions', it's been only partially successful. It is such a bummer it has to be this way!

A more 'CSS-friendly' way to solve this is to explicitly state the class hierarchy in the subclass name, like this (in e.g. mymenu.module.css):

.header {
}

.headerMenu {
  display: block;
}

Note that in this case you can't use the bracket notation, as CSS modules won't see it - so the class name can't have hyphens and it can't be 'normally' cascaded ¯\(ツ)/¯ - e.g.:

.header-menu {
  display: block;
}

and/or

.header .menu {
  display: block;
}

will not work, as the bracket selector notation (yet another CSS hack!) simply won't recognize it.

While this is still a [local] CSS hack, at least it's restricted to the classes at hand, doesn't bloat the size of your bundle, and keeps your CSS as well, CSS.