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

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

css-modules reactjs

10

Chris · 技术社区 · 6 年前

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

.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 回复 | 直到 6 年前

1

9

Chris 6 年前

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

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

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

推荐文章

iknowhtml · 使用网页包和PostSS启用热重新加载

7 年前

Alan H. · 使用选择器感知将CSS解析为JavaScript

7 年前

dagda1 · 具有网页包小写文件名的css模块

7 年前

intercoder · 使用jest和css模块测试react组件时出错

7 年前