如何在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 做出反应
如何使用 Webpack 在摩纳哥加载 npm 模块类型定义并做出反应 create-react-app