代码之家 › 专栏 › 技术社区 › Chris

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

css-modules reactjs

10

Chris · 技术社区 · 7 年前

我有一个组件,它有自己的风格,例如。

.prompt { color: red; }

声明如下:

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

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

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

注意 background: yellow

1 回复 | 直到 7 年前

1

9

Chris 7 年前

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

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

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