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

Posted

技术标签:

【中文标题】如何在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 在同一个组件上使用多个类。

以上是关于如何在css模块中嵌套类并做出反应?的主要内容,如果未能解决你的问题,请参考以下文章

如何切换 css 类以与 setState Hook 做出反应

R Shiny:如何在嵌套模块之间传递反应变量

如何使用 Webpack 在摩纳哥加载 npm 模块类型定义并做出反应 create-react-app

如何在反应 css 模块中创建全局设置文件

做出反应。如何添加 autoprefixer 包并进行配置?

在反应中使用css模块如何将className作为道具传递给组件