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

Posted 2023-02-19

【中文标题】如何在css模块中嵌套类并做出反应？

【英文标题】：How to nest classes in css modules and react?

【发布时间】：2017-04-15 18:38:04

【问题描述】：

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

【问题讨论】：

我遇到过这个关于 next.js 的讨论，也许会出现一些答案或最终修复：github.com/vercel/next.js/discussions/19417

【参考方案1】：

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

示例（React + JSX）：

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

.header 
   .menu 
      display: block;
   
 

【讨论】：

这真的很有帮助！这不是一条容易找到的信息（您可以参考任何嵌套类），非常感谢您提出这个问题！

非常有帮助。感谢分享！

需要注意的一点是，您没有获得嵌套类选择的强度。有时我希望他们会更改此功能或至少解释原因。在这一点上，我不确定这是一个错误还是一个功能。如果您希望嵌套类选择器实际向下转换并存在，这也会令人困惑，因为除非您引用它们，否则它们不会，而且我相信当您导入它们时它们都会成为***选择器。

你能达到 3 级深度嵌套类吗？

大声笑，我也想多了。现在对我来说似乎更合乎逻辑

【参考方案2】：

你可以使用 [class~=classname]

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

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

【讨论】：

这可以工作，我已经在网上看到了这个脆弱的“黑客”作为修复几个地方，但我仍然担心一个类名可能是另一个类名的子字符串，此时这个效果不太好。即：[class~=cat] 将匹配 categories 之类的类。

【参考方案3】：

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

.header 
  :global 
    .menu 
      display: none;

      &.menu-visible 
        display:block;
      
    
  

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

【参考方案4】：

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

https://github.com/JedWatson/classnames

它看起来像这样

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

【讨论】：

我认为这不能回答我的问题。我会尽量清除

您可以使用classnames 在同一个组件上使用多个类。