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

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的样式。如下所示：

请注意，来自第二类的background: yellow正被模块自己的类的背景覆盖。

除了在二级课中使用！important之外，我该如何解决这个问题呢？

Answer 1

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

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

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

基本上，我只是用另一个兄弟类标记模块标记以增加特异性并使用它来定位必要的属性。比虐待更好！重要。