reactjs - 如何在CSS模块中嵌套类并使用react？

我正在尝试在我的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更改其属性。

最佳答案

好的，我解决了。我认为我只是过分了。除了编写styles.header.menu，我可以只编写styles.menu，即使它是嵌套的也是如此。

关于reactjs - 如何在CSS模块中嵌套类并使用react？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40905309/