处理样式表顺序和 css 模块类名覆盖

Question

我有一个组件有自己的风格，例如

.prompt { color: red; }

声明如下：

import cn from 'classnames';
import styles from './styles.css';

const MyComponent = ({className}) => {
  return (
    <div className={cn(styles.prompt, className)}>
      test
    </div>
  );
}

在我的特定用例中，传入的 className 的样式表实际上是在模块样式表之前定义并添加到头部的，因此模块的 css 总是覆盖传入的 className 的样式。类似于：

请注意来自第二个 class 的 background: yellow 被模块自身 class 的背景覆盖。

除了在辅助 class 中使用 !important 之外，我该如何解决这个问题？

Answer 1

根据李斯特先生的回复，我重新评估了我现有的特异性知识，并在更高层次上提出了以下解决方案css：

// in app.scss
.offline.prompt {
    color: red;
}

// in app.tsx
const classes = cn(Styles.offline, Styles.prompt);
return <OfflineApp className={classes}>...</OfflineApp>;

本质上，我只是用另一个兄弟 class 标记模块标记以增加特异性并使用它来定位必要的属性。比滥用 !important.

好多了

处理样式表顺序和 css 模块类名覆盖

Dealing with stylesheet order and css module className overrides

reactjs

css-modules