如何在 React 中覆盖用 SCSS 编写的组件样式答案

【问题标题】：How do I override component style written with SCSS in React如何在 React 中覆盖用 SCSS 编写的组件样式
【发布时间】：2020-04-23 20:32:36
【问题描述】：

我是 React 和 scss 的新手。也许这是一个基本问题，但我认为这真的很奇怪。

我创建了 4 个文件：

组件.js

import React from "react";
import CompStyles from "./component.module.scss";

const Component = (props) => {
  console.log(CompStyles["test"], props.className);
  return (
    <div className={`${CompStyles["test"]} ${props.className}`}>
      {props.children}
    </div>
  );
};

export default Component;

component.module.scss

.test {
  color: red;
}

Demo.js

import React from "react";
import DemoStyles from "./demo.module.scss";
import Component from "./Component";

const Demo = (props) => {
  return <Component className={DemoStyles["demo"]}>Text</Component>;
};

export default Demo;

demo.module.scss

.demo {
  color: green;
}

Component.js 是一个基本组件，正如其名称所示。我将Component 作为Demo 的孩子包含在Demo.js 中。他们都有自己的scss 文件。

我的意图很明显。我想覆盖Component 的一些样式，所以将className 的props 传递给Component 并在Component.js 中处理这个逻辑。但是结果是覆盖不了。

经过一些研究和谷歌，我知道这是scss import priority 问题的原因。运行Demo.js 时，demo.module.scss 正在加载，component.module.scss 稍后会加载。

那么如何实现覆盖组件样式呢？我认为这是一个非常基本的要求。

【问题讨论】：

标签： javascript css reactjs sass overriding

【解决方案1】：

只需在Demo.js中的./Component之后导入demo.module.scss，这样webpack就会添加demo。在编译文件中 component.module.scss 之后的 module.scss。

参考 Demo.js 中的导入顺序。

import React from "react";
import Component from "./Component";
import DemoStyles from "./demo.module.scss";

【讨论】：