Как преодолеть перекрытие схожих именных CSS-классов из двух CSS-фреймворков?

Question

Я использовал Modal из semanctic-ui-react внутри create-react-app проекта.Внутри index.js я объявил импорт CSS-файлов для фреймворков

import "semantic-ui-css/semantic.min.css"
import "bootstrap/dist/css/bootstrap.css"

Я заметил странное позиционирование Modal.После отладки я обнаружил, что класс .modal CSS применяется, который исходил от Bootstrap's CSS.Так как semantic-ui также имеет похожие классы имен, это вызвало перекрытие.
При удалении import "bootstrap/dist/css/bootstrap.css", модал правильно позиционируется.

Решение (частичное) на мой взгляд:
импортировать CSS-файл только в тот класс, в котором он был использован, а не в index.js
- у этого есть двапроблемы:
1. Предположим, EditForm.js использует semantic-ui, я импортирую semantic.min.css непосредственно в этот файл.Но что, если это родительский класс, в котором используется EditForm.js, если parent.js использует bootstrap.css, то снова возникнет та же проблема.
2. Я не уверен в этом, но импортирую полный CSS отдельно длякаждый файл может сделать эти файлы тяжелыми, пожалуйста, исправьте меня здесь.

Я хочу использовать обе платформы в моем проекте, что было бы идеальным способом?

Answer 1

Я бы не рекомендовал назначать id для вашего компонента и записывать там свои переопределения.Это заставит вас использовать id везде в вашем приложении, что вы не хотите делать.

У вас есть два варианта:

1) Самый простой вариант - Создайте свою собственную версию Bootstrap , которая содержит ТОЛЬКО стили для компонентов, которые вы фактически используете в своем приложении.Это также приведет к сокращению количества стилей, которые ваш пользователь должен загрузить для отображения вашего приложения.Просто исключите "Modal" из сборки (и любые другие компоненты начальной загрузки, которые вы не используете).

2) Сделайте сравнение классов между двумя библиотеками, которые вы используете.На самом деле это должно быть легко сделать с помощью инструментов разработчика в любом браузере.Вы будете видеть каждый раз, когда целевой компонент соответствует классу в одной из ваших таблиц стилей.Некоторые правила будут вычеркнуты в одном, некоторые - в другом.Если вы хотите, чтобы стили для семантического пользовательского интерфейса имели приоритет, вам нужно создать отдельную таблицу стилей, которая повышает специфичность для свойств стиля, которые теряются из семантического пользовательского интерфейса.Я предполагаю, что, вероятно, есть только несколько свойств стилей, которые переопределяются или которые вам не нужны.

Вы также можете поместить вышеупомянутые стили в реквизит стиля на вашем модале, если вы не хотите создаватьотдельный файл, и они будут добавлены внутри компонента, фактически более специфично, чем стили в любом файле CSS.