Scoping CSS в React, когда вы не можете изменить HTML или Stylesheets - PullRequest
0 голосов
/ 12 марта 2020

Так что в основном я воссоздаю только динамическое содержимое c древнего веб-приложения в React, а некоторые ресурсы (верхний и нижний колонтитулы) извлекаются через внутренний API. Содержимое stati c размещено на собственной CMS, и я вообще не буду с этим сталкиваться.

На текущем веб-сайте используется настроенная версия Bootstrap 2, и я использую существующую версию верхний и нижний колонтитулы как HTML, устанавливая их опасно SetInner HTML и помещая между ними мой новый контент React. У меня есть пользовательская таблица стилей в заголовке моего индекса. html.

Проблема в том, что я использую response- bootstrap для стилизации и компоновки приложения, чтобы поддерживать согласованный стиль, но наш bootstrap лист настолько стар, почти ничего не реагирует - bootstrap работает с ним. Когда я импортирую новый лист bootstrap, он полностью разрушает верхний и нижний колонтитулы из-за совпадения имен классов.

Есть ли способ охватить старую таблицу стилей bootstrap для применения только к верхнему и нижнему колонтитулам а новый, применимый только к новому контенту React? Я мог бы загрузить старую таблицу bootstrap, изменить ее и разместить отдельную версию в своем приложении, но я бы предпочел не делать выбор глобальных стилей. Я не могу изменить HTML, кроме того, чтобы обернуть вокруг него div.

...