CSS Modules & ReactJS：不同组件中的父子 CSS 类

Posted 2023-02-21

【中文标题】CSS Modules & ReactJS：不同组件中的父子 CSS 类

【英文标题】：CSS Modules & ReactJS: Parent and child CSS classes in different components

【发布时间】：2017-06-30 16:58:50

【问题描述】：

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

.main .main_in_logo 
 color: red;

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

【参考方案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)

【参考方案2】：

我一直在寻找同样的问题，但在这里没有找到解决方案，可能是因为该帖子已有 3 年历史了。接受的答案是，在我看来，但不仅仅是我的，不可扩展。

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

这是我所做的，完全符合我的需要：

---

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

---

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

.logo 
   ...some CSS...


.main .logo 
   color: red

---

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

虽然看起来很奇怪，但我花了一些时间才发现这个解决方案，我希望这能节省一些时间并帮助其他人！

【讨论】：

正是我需要的！太棒了，谢谢。

【参考方案3】：

在 ReactjS 中使用 CSS 模块时，您无需指定所指的子类。

这样做：

.main_in_logo 
     color: red;

在样式表中就足够了。

【参考方案4】：

子组件不应有依赖于父 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>

【讨论】：

嵌套类呢？如果我们有 .main .main_in_logo .anotherClassInside... anotherClassInside 的 css 将永远不会被应用。你如何设置其他嵌套类的样式？

父组件将一个className prop（或多个prop，如headerClassName 和bodyClassName）传递给子组件，然后子组件将该className 添加到它们的元素中。现在，父组件可以根据传递给子组件的类名在其 css 文件中添加样式

这可行，但根本无法扩展......这就是我的问题的重点。

您可能应该发布一个关于如何将其作为比例尺的新问题，并以您正在谈论的比例尺为例

【参考方案5】：

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

但即使你真的需要它，你也可以为这两个组件使用全局 css - documentation about global css for react-css-modules。