title: How to nest classes in css modules and react?
body: <p>I am trying to use CSS Modules in my React project. First part of the problem is that if I write nested css classes (using sass), I don't know if I can access the inner ones, since those seems to be compiled into unique classnames as well. Some code:</p>
  
  <pre><code>&lt;div className={this.state.visible ? styles.header+" menu-visible" : styles.header}&gt;
      &lt;div className="menu"&gt;
          &lt;a className="link"&gt;title&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
     .header {
         &amp;.menu-visible {
              .menu {
                   display:block;
              }
          }
      }
  </code></pre>
  
  <p>I have a wrapping class that sometimes is "menu-visible" which changes attributes on all the children, is it bad practice to do it like this in React?</p>
  
  <p>There is multiple classes inside the .header that are changed if the menu is visible, therefore it would be convinient to just change the wrapping class, can I reference the children in some way? So that the remain nested in scss?</p>
  
  <p>EDIT</p>
  
  <p>One solution that I can think of is to replace className="menu" with className={styles.header.menu} but that seemed not to work. The problem is that I would like .menu to change its attributes if its parent has the class menu-visible. </p>