如何在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

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

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

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

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

Answer 2

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

示例（反应 + JSX）：

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

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

Answer 3

您可以使用 [class~=classname]

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

它将不会被检测为一个类并被单独保留。

Answer 4

请注意，当深度嵌套选择器时，接受的答案中的解决方案可能会导致 css 包大小显着增加。

接受的解决方案具有多 1 层嵌套

JSX：

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

社会保障体系：

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

输出（假设 css 模块的默认设置）：

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

替代解决方案

更好的编写方法是松散地借用 BEM 方法并使用父选择器：

JSX：

<div className={styles.header}>
  <ul className={styles.headerMenu}>
    <li className={styles.headerMenuItem}>
      Whatever
    </li>
  </ul>
</div>

社会保障体系：

.header {
   &Menu {
     &Item {
       display: block;
     }
   }
 }

输出：

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