Question

我正在尝试在我的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 = {styles.header.menu}替换className =“menu”，但这似乎不起作用。问题是我希望.menu在其父级具有类菜单可见时更改其属性。

Answer 1

还有另一种方法。我使用classnames包来执行此操作。

https://github.com/JedWatson/classnames

它看起来像这样

<div className={classnames('styles.header',{ 'menu-visible': this.state.visible})}>

Answer 2

好的，我解决了。我想我只是在脑海里过度了。而不是编写styles.header.menu我可以编写styles.menu，即使它是嵌套的......

如何在css模块中嵌套类并做出反应？

2 个答案: