css模块中未生成的类名选择器

Posted 2023-02-21

【中文标题】css模块中未生成的类名选择器

【英文标题】：Non-generated classname selector in css module

【发布时间】：2020-11-13 00:27:37

【问题描述】：

假设我们有这样的第三方CardComponent

<Card title="This is a title in the header">This is text in the body</Card>

这会以纯 html 呈现

<div class="Card">
  <div class="CardHeader"></div>
  <div class="CardBody"></div>
</div>

我正在使用 css 模块进行样式设置（在本例中为 scss）。

.customCard 
  .CardBody 
    color: red;
  

然后将类添加到 Card

import styles from ...
...
<Card className=styles.customCard ...>...</Card>

上述方法不起作用，因为它为CardBody 创建了一个生成类，例如CardBody_sjkdh43。有没有办法在模块中选择非生成的类名？还是只能以旧式方式使用样式表？

Demo SandBox

【问题讨论】：

你能分享一下demo吗？

添加了一个沙箱:)

看来您只能访问我们作为道具传递的 customCard 类 :)

【参考方案1】：

这是一个老问题，但答案是 css 模块中的 :global() 选择器。

欲了解更多信息：Exceptions - CSS Modules

示例代码：

<div class=styles.myClass>
    <SomeComponentWithOwnCss />
</div>

输出：

<div class="myClass_s4jkdh3">
    <div class="SomeComponentWithOwnCss"></div>
</div>  

还有 CSS：

.myClass div:global(.SomeComponentWithOwnCss) 
    background-color: red;

此处的工作示例：codesandbox