Reactjs 处理样式表顺序和css模块类名重写

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

.prompt { color: red; }

声明如下：

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

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

从“classnames”导入cn；
从“/styles.css”导入样式；
常量MyComponent=（{className}）=>{
返回(
测试
);
}

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

请注意，来自第二个类的

背景：黄色

被模块自身类的背景覆盖

---

除了使用！重要的是，在第二节课上，我如何解决这个问题？

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

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

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

//在app.scss中
.offline.prompt{
颜色：红色；
}
//在app.tsx中
const classes=cn（Styles.offline，Styles.prompt）；
返回。。。；

---

本质上，我只是用另一个同级类来标记模块标记，以增加特殊性，并使用它来定位必要的属性。比虐待要好得多！重要信息。

我们可以看到cn代码吗？样式是如何定义的？我认为您需要对样式规则进行排序。有很多方法可以提高选择器的特殊性，而无需诉诸

！重要信息

。给div一个id，从DOM树向选择器添加一些元素名（比如

body div div.app\uuuu updatecompt\uuuuuu 32EkS

），等等。你能把这个标记为已回答吗@Chris？你实际上可以通过执行

.offline.offline{…}

来保存一些行，并使

类名保持干净一点