Первая страница - Index.js и содержит Index.css

Путь-> /src/action/Index.js

- src
|
-- action
|
--- Index.js

import '../css/Index.css';

Вторая страница Customer.js содержит Auth.css

Путь-> /src/action/User/Customer.js

- src
|
-- action
|
--- User
|
---- Customer.js

import '../../css/Auth.css';

Проблема в том, что обе страницы используют оба файла CSS. Как мне этого избежать?

0
tour travel 8 Янв 2020 в 11:20
Вы рассматривали возможность использования css-модулей?
 – 
ThiefMaster
13 Янв 2020 в 15:28
Разместите лучший пример источника, чтобы задать четкий вопрос. Вы использовали webpack?
 – 
Nikola Lukic
13 Янв 2020 в 15:41

2 ответа

Ваш модуль index.css должен импортировать «дерево» соответствующих модулей css, используя @import «example.css». Я бы рекомендовал вложить его больше в разные модули CSS, которые сами импортируют другие CSS, создавая логическое дерево импорта CSS. Используя это, вам нужно будет выполнить импорт только в корневой индекс css.

0
Ben Cohen 8 Янв 2020 в 11:27

Эти файлы CSS становятся глобальными при таком импорте. Самый простой способ - добавить classNames к вашему компоненту следующим образом:

<ComponentA className="a">

Затем в соответствующем файле CSS укажите класс:

.a {
  color: red;
}

На самом деле вы можете захотеть познакомиться с решениями CSS-in-JS, такими как стилизованные компоненты, или изучить автоматическое хеширование для CSS с помощью webpack. Посмотрите, например, это руководство: https: // blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b

0
Capuchin 8 Янв 2020 в 11:25
Непонятно, куда вы добавляете className? и как можно разделить два файла css с именем класса?
 – 
tour travel
8 Янв 2020 в 11:38
Not clear, where you add className> как в html, как атрибут - How can separate two css file with a classname> создать два файла css и импортировать их в файлы JS
 – 
Capuchin
13 Янв 2020 в 15:18