如何在 React CSS 模块中使用嵌套的 CSS 类（级联）

Question

我确实在 SO 上看到了很多类似的问题，但最后，我的问题似乎有点不同..

我有一个 react 项目，其中（出于某种原因）我想要两种类型的 CSS 加载：

• 一些全局（从main.tsx 导入为import 'assets/global.css';）
• 一些作用域（从组件导入为import style from './style.module.css';）

全局的按预期工作，这是一个奇怪的模块。如果我想在一个 div 中设置一个简单的<a></a>，以下工作：

版权

.copyrights a { // as Link is rendered as a `<a></a>`
  text-decoration: none;
}


/*...*/
import style from './style.module.css';

export const CopyrightsComponent = () => {
  return (
    <Container className={style.copyrights}>
      <Row className={`justify-content-center`}>
        <p>
          {COPYRIGHTS_TEXT}
          <Link to={TERMS_OF_USE_ROUTE_ROUTE}>{COPYRIGHTS_TERMS_OF_USE_HYPERLINK}</Link>
          <Link to={TERMS_OF_USE_ROUTE_ROUTE}>{COPYRIGHTS_PRIVACY_POLICIES_HYPERLINK}</Link>
        </p>
      </Row>
    </Container>
  );
};

export default CopyrightsComponent;

但是！当尝试嵌套 CSS 以选择正确的子项（例如某个 div 中的特定 img）时，它不起作用.. 我不明白为什么

富

.foo .bar1 a {
  text-decoration: none;
}
.foo .bar2 a {
  color: red;
}

/*...*/
import style from './style.module.css';

export const FooComponent = () => {
  return (
    <div className{style.foo}>
      <div className{style.bar1}>
        <a>bar 1</a>
      </div>
      <div className{style.bar2}>
        <a>bar 2</a>
      </div>
    </div>
  );
};

export default FooComponent;

感谢您的帮助...

Answer 1

这不起作用，因为您的 .bar 类的作用域是元素。

如果您将选择器的特异性降低到以下任一情况，它应该可以工作：

.foo div a

或者，

.bar a

当您使用 CSS 模块并将您的类直接链接到一个元素时 - 类名将变得唯一，因为根据 CSS 模块规范（它的范围仅限于元素），类名会附加混淆。您可以通过检查已使用此技术链接到类的 DOM 元素来看到这一点；它看起来像这样：component_name-module--class_name--eq-vo。

因此，当您尝试像最初那样链接自定义选择器时，由于这种混淆，选择器的中间部分 (.bar) 不存在最初的简单性。