Применить CSS тему, основанную на состоянии реакции

Question

У меня есть приложение REACT (загруженное с create react app и react-bootstrap), для которого я пытаюсь добавить опцию переключения на ТЕМНУЮ тему, если пользователь включил это в своих настройках. Я храню настройки на сервере и извлекаю их в свойства.

У меня есть отдельная таблица стилей с именем dark.css, где все мои стили компонентов переопределены.

dark. css (пример) :

#root {
  background-color: var(--dark);
  color: var(--light)
}

.card {
   background-color: var(--dark); // overriding bootstrap styles here 
}

Я пытаюсь применить его к root моего приложения следующим образом:

componentWillReceiveProps() {
        if (this.props.profile && this.props.profile.theme === 'dark') {
            require('./styles/dark.css');
        }
    }

Отлично работает при локальном запуске приложения с yarn start. Но когда я на самом деле собираю приложение с помощью веб-пакета, оно работает очень странно. Часть новых стилей применяется и частично независимо от выбранной темы. Например, фон применяется из основной темы и игнорируется в темной теме, но цвет текста противоположен.

Почему это происходит?

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

Answer 1

Я решил свои проблемы, просто импортировав все стилизованные css листы, а затем добавив к ним префиксы следующим образом:

.dark .card {
   color: black;
}

.light .card {
   color: white;
}

Я назначаю класс оболочке на основе моих реквизитов:

<div id="root" className={theme}>
   // content
</div>

Работает как шарм.

Answer 2

Я предполагаю, что у вас есть конфликты имен, которые переопределяют ваши css.

React поддерживает CSS Модули наряду с обычными таблицами стилей с использованием соглашения об именовании файлов [name].module.css.

CSS Модули позволяют использовать одно и то же имя класса CSS в разных файлах без беспокойства по поводу именования коллизий