处理样式表顺序和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来自第二类的from被模块自身类的背景覆盖。

除了在辅助类中使用！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>;

本质上，我只是用另一个同级类标记模块标记，以增加特异性并使用它来定位必要的属性。比滥用！重要。