Как предотвратить переписывание стилей react приложения, монтированного в обычный веб-сайт (напрмер Wordpress)?

Question

[IvanKalinin]

Здравсвуйте.
Кто может поделиться опытом использования React приложений в сайтах наприме на Wordpress.

Столкнулся с такой проблемой, что стили React приложения перезаписывают стили самого вебсайта (у обоих есть пересекающиеся классы (например нормализации, цвета по умолчанию и/или разные настройки Bootstrap)

Как вы изолируете React приложение от остальной части веб-сайта.

Comments

[Ilya]

используй css modules

Answer 1

[ой всё]

надежнее всего контейнеру в котором сидит ваш реакт присвоить id и переписать все стили для реакта начиная с этого #react_container_id
хвосты могут стать длиннее, но зато они не будут конфликтовать с основными в обе стороны

обычно в css лучше не использовать id в качестве селекторов, но в случае интеграции этот вариант выручает

Comments

[IvanKalinin]

Думал об этом, но в данном случае ломается специфика классов.
Я оборачивал в класс, допустим .brand-react-app и нормализация к примеру .brand-react-app label уже имеет больший приоритет чем .Component_label

[ой всё]

To_wave, приоритеты ".brand-react-app label" и ".Component_label" зависят от их места в каскаде стилей
#id отрезает внешние каскады
как я уже писала, хвосты будут длиннее, но это гарантирует бесконфликтность

[IvanKalinin]

AnneSmith, Пожалуй это действительно может быть решением.
Осталось решить другой вопрос.
Я использую CSS Modules и extract-text-plugin.
Случайно не знаете, как можно обернуть все стили в bundle.css каким нибудь классом, что то вроде
.specifiedClass {
// стили из бандла
}

[ой всё]

а класс сохранит внешнюю каскадность
заворачивать надо в #id

сорри, последний раз я сама этим занималась давно и вручную, сейчас это головная боль наших подрядчиков :)

[IvanKalinin]

ой всё, к сожалению мой PR отклонили, из-за того, что функционал слишком специфичен (с их точки зрения), но можно и воспользоваться моим форком в проектах где это нужно. README так же обновлен

Answer 2

[Negwereth]

CSS modules

Comments

[IvanKalinin]

c CSS модулями как раз проблем и нет. Но помимо CSS модулей есть Bootstrap, нормализация, цвета "чистым" тегам по умолчанию и т.д.