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

我是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;

组件.module.scss

.test {
  color: red;
}

演示.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;

演示.module.scss

.demo {
  color: green;
}

Component.js顾名思义，是一个基本组件。我包括Component作为Demoin的孩子Demo.js。他们两个都有他们的scss文件。

我的意图很明显。我希望覆盖某些款式的Component，所以通过一个className道具，Component并处理这个逻辑Component.js。但结果是我无法覆盖它。

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

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