如何在 React 中覆蓋用 SCSS 編寫的組件樣式

Question

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

演示模塊.scss

.demo {
  color: green;
}

正如其名稱所示， Component.js是一個基本組件。 我在Demo.js中包含Component作為Demo的子項。 他們都有自己的scss文件。

我的意圖很明顯。 我想覆蓋Component的一些 styles ，因此將className道具傳遞給Component並在Component.js中處理此邏輯。 但結果是我無法覆蓋它。

經過一番研究和谷歌，我知道這是一個scss import priority問題的原因。 運行Demo.js時，會加載 demo.module.scss， demo.module.scss會加載component.module.scss 。

那么如何實現覆蓋組件 styles？ 我認為這是一個非常基本的要求。

Answer 1

只需在Demo.js中的./Component之后導入demo.module.scss ，這樣 webpack 就會在編譯文件的component.module.scss之后添加demo.module.scss 。

請參閱Demo.js中的導入順序。

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