我正在尝试在我的 React 项目中使用 CSS 模块。问题的第一部分是，如果我编写嵌套的 css 类(使用 sass)，我不知道是否可以访问内部类，因为这些类似乎也被编译成唯一的类名。一些代码:

<div className={this.state.visible ? styles.header+" menu-visible" : styles.header}> 
    <div className="menu"> 
        <a className="link">title</a> 
    </div> 
</div> 

.header { 
    &.menu-visible { 
        .menu { 
            display: block; 
        } 
    } 
} 

我有一个包装类，有时是“菜单可见”的，它会更改所有子级的属性，在 React 中这样做是不是不好的做法？

如果菜单可见，.header 中有多个类会发生更改，因此仅更改包装类会很方便，我可以以某种方式引用子级吗？这样仍然嵌套在 scss 中吗？

编辑

我能想到的一个解决方案是将 className="menu"替换为 className={styles.header.menu} 但这似乎不起作用。问题是，如果 .menu 的父级具有 menu-visible 类，我希望 .menu 更改其属性。

请您参考如下方法:

我解决了。我想我只是在心里做得太过分了。我可以只编写 styles.menu，而不是编写 styles.header.menu，即使它是嵌套的。

示例(React + JSX):

<div className={styles.header}> 
  <div className={styles.menu}> 
      Whatever 
  </div> 
</div> 
 
.header { 
   .menu { 
      display: block; 
   } 
 }