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

dkqlctbz 于 2022-11-26 发布在其他

关注(0)|答案(2)|浏览(182)

假设我们有这样一个第三方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

css

来源：https://stackoverflow.com/questions/63051539/non-generated-classname-selector-in-css-module

2条答案

按热度按时间

5kgi1eie1#

这是一个老问题，但答案是css模块中的:global()选择器。
如需更多信息：异常- CSS模块
示例代码：

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

输出量：

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

以及CSS：

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

工作示例如下：codesandbox

赞(0）回复(0）举报 2022-11-26

xxslljrj2#

一个小补充@Closery的回答，你救了我的屁股男人️。
对于SCSS，您可以尝试以下更方便方法：
第一个
输出：

<style>
  .filename-parent__7MR41 .non-cssmodule-class { color: red; }
</style>
<div class="filename-parent__7MR41">
    <div class="non-cssmodule-class"></div>
</div>

赞(0）回复(0）举报 2022-11-26

我来回答

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

2条答案

相关问题

热门标签

最新问答