如何将嵌套 css class（级联）与 React 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 以便 select 正确 child（就像某个 div 中的特定 img）时，它不起作用..我不明白为什么

foo

.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 class 的范围仅限于该元素。

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

.foo div a

或者，

.bar a

当您使用 CSS 模块，并且您 link 您的 class 直接指向一个元素时 - class 名称变得唯一，因为混淆被附加到 class 名称，根据 CSS 模块规范（它的范围是元素）。您可以通过检查使用此技术 link 编辑到 class 的 DOM 元素来看到这一点；它看起来像这样：component_name-module--class_name--eq-vo.

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

如何将嵌套 css class（级联）与 React CSS 模块一起使用

How to use nested css class (cascade) with React CSS Modules

css

reactjs

css-modules

react-css-modules