CSS 模块和 ReactJS：不同组件中的父级和子级 CSS 类

Question

所以我正在构建一个反应应用程序并有一个简单的问题。如果我有两个独立的组件： 和 分别带有CSS类navigation.css和navigationLogo.css。在navigation.css中我有一个名为.main的类，在navigationLogo.css中我想要一个像这样的类：

.main .main_in_logo {
 color: red;
}

但是对于 CSS 模块我无法做到这一点，有什么解决办法吗？

Answer 1

我只是觉得这里的解释不够完整。在 css 中，您可以执行 .parentSelector .childSelector 来选择子项。同样的规则也适用于 css 模块，但在 html/jsx 中，您应该向父级和子级添加相关的 className -> styles.parentSelector 、 styles.childSelector 。

<div className={styles.container}>text</div>

这样你就可以在你的 css 中添加如下内容：

.banner .container{
background-color:reb;
}
.banner .container{
background-color:blue;
}

有时，您使用库并且想要更改库内 DOM 中的某个位置，但无法更改其源代码。在这种情况下，您可以像这样使用 :global ：

.parentElement :global(div)
.parentElement :global(#some-lib-element-selector)

Answer 2

我一直在寻找同样的问题，但没有在这里找到解决方案，也许是因为该帖子已经有3年了。在我看来，但不仅仅是我的观点，公认的答案是不可扩展的。

我真的不知道这是否是新事物，但我发现我会在适应 CSS 模块的普通 CSS 中做什么。

这是我所做的并且完全适合我的需求：

/* parent.css */
.main {
   ...some CSS...
}

/* logo.css */
@value main from "./parent.css";

.logo {
   ...some CSS...
}

.main .logo {
   color: red
}

在这里，我们使用@value，它是一个 CSS 模块变量，允许我们与另一个文件绑定来构建一个选择器，包括父级“main”的最终名称。

尽管在我看来很奇怪，但我花了一些时间才找到这个解决方案，我希望这会节省一些时间并帮助其他人！

Answer 3

子组件不应具有依赖于父 css 类名的 css 规则。

孩子应该是：

.main_in_logo { color: red; }

如果需要定义同时涉及父级和子级的样式，那么最简单的方法是完全在父级中定义样式：

/* navigation.css */
.main .main_in_logo {
   color: red;
}

然后让父级将 css 类传递给子级并告诉子级使用它：

// Navigation.js
<NavigationLogo className={navigationCss.main_in_logo} />

// NavigationLogo.js
<div className={"foo " + this.props.className}>stuff</div>