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

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

Answer 1

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

示例（React + JSX）：

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

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

Answer 2

你可以使用 [class~=classname]

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

它不会被检测为一个类并单独放置。

Answer 3

另一种更好地保留嵌套类和样式的解决方案是在使用像 sass 或更少这样的预处理器时，在所有嵌套类上使用全局范围 :global。

.header {
  :global {
    .menu {
      display: none;

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

<div className={styles.header}>
  <div className="menu menu-visible">
      Whatever
  </div>
</div>

Answer 4

还有另一种方法。我使用classnames 包来做到这一点。

https://github.com/JedWatson/classnames

它看起来像这样

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