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

Question

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

.main .main_in_logo {
 color: red;
}

但是使用 CSS 模块我无法做到这一点，有什么解决方法吗？

Answer 1

为什么需要创建 .main .main_in_logo - 样式与父元素的主要思想是不会在将来破坏您的 css 与其他样式。但是 css 模块是不可能的，因为你的风格将永远独一无二。

但即使您真的需要它，您也可以对这两个组件使用全局 css - documentation 关于 react-css-modules.

的全局 css

Answer 2

child 组件不应有依赖于 parent css class 名称的 css 规则。

child 应该是：

.main_in_logo { color: red; }

如果您需要定义涉及parent和child的样式，那么最简单的方法是将样式完全定义在parent:

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

然后让 parent 将 css class 传递给 child 并告诉 child 使用它：

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

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

Answer 3

在 ReactjS 中使用 CSS 模块时，您无需指定指的是哪个 child class。

这样做：

.main_in_logo {
     color: red;
}

在样式表中就足够了。

Answer 4

我一直在寻找同样的问题，但没有在这里找到解决方案，可能是因为 post 已经 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 5

我只是觉得这里的解释不够完整。在 css 中，您执行 .parentSelector .childSelector 以便 select child。同样的规则适用于 css 模块，但在你的 html/jsx 中你应该添加到 parent 和 child 相关的类名 -> 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)

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

CSS Modules & ReactJS: Parent and child CSS classes in different components

css

reactjs

css-modules

react-css-modules

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

CSS Modules & ReactJS: Parent and child CSS classes in different components

css

reactjs

css-modules

react-css-modules

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