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

Question

假设我们有这样的第三方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;
  }
}

然后将class添加到卡片

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

以上将不起作用，因为它为 CardBody 创建了生成的 class，如 CardBody_sjkdh43。有没有办法在模块中 select 非生成的 class 名称？或者这是否只能以老式的方式使用样式表？

Answer 1

这是一个老问题，但答案是 :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

Non-generated classname selector in css module