32

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

4

5 回答 5

47

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

示例（反应 + JSX）：

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

.header {
   .menu {
      display: block;
   }
 }
于 2016-12-01T08:24:51.457 回答
12

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

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

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

<div className={styles.header}>
  <div className="menu menu-visible">
      Whatever
  </div>
</div>
于 2021-12-17T07:15:44.857 回答
8

你可以使用 [class~=classname]

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

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

于 2021-08-19T12:46:32.627 回答
-1

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

https://github.com/JedWatson/classnames

它看起来像这样

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

于 2016-12-01T08:12:41.403 回答
-1

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

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

JSX：

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

SCSS：

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

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

.myComponent_header__27ep6 .myComponent_menu__32Qvy  .myComponent_item__2RWLN {
  display: block
}

替代解决方案

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

JSX：

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

SCSS：

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

输出：

.myComponent_headerMenuItem__37djq { display: block }
于 2022-02-16T15:31:02.867 回答