Как переопределить стиль компонента, написанный с S CSS в React - PullRequest
Новая
       36

Как переопределить стиль компонента, написанный с S CSS в React

0 голосов
/ 23 апреля 2020

Я новичок в React и scss. Может быть, это базовый c вопрос, но я думаю, что это действительно странно.

Я создал 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 .s css

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

demo.module.s css

.demo {
  color: green;
}

Component.js является компонент basi c как показывает его имя. И я включаю Component как ребенок Demo в Demo.js. У них обоих есть scss файлы.

Мое намерение очевидно. Я хочу переписать некоторые стили Component, поэтому передайте className реквизиты в Component и обработайте эту логику c в Component.js. Но в результате я не могу перезаписать его.

После некоторых исследований и Google, я знаю причину, по которой это scss import priority проблема. При запуске Demo.js загружается demo.module.scss, а component.module.scss будет загружено позже.

Так как мне добиться переопределения стилей компонентов? Я думаю, что это очень базовое c требование.

1 Ответ

0 голосов
/ 23 апреля 2020

Просто импортируйте demo.module.s css после . / Component in Demo. js, так что веб-пакет добавит demo.module.s css после component.module.s css в соответствующем файле.

Обратитесь к заказу на импорт в Демо. js. 

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