Блог

У меня есть эта переменная состояния:

 this.state = {
    theme: "light"
}
  

Это состояние добавляется к имени класса divs, поэтому оно становится
<div class name=`app ${this.state.theme}`>

У меня также есть три файла scss: App.scss, LightTheme.scss и DarkTheme.scss. App.scss должен импортировать один из файлов scss темы, потому что у них есть некоторые переменные цвета, которые составляют тему.

Я попытался использовать оператор if scss, но обнаружил, что scss нельзя использовать для проверки, содержит ли элемент определенное имя класса или нет.

Импорт файлов темы с помощью JavaScript также не работает, поскольку app.scss будет иметь неопределенные переменные.

Есть мысли?

Вы можете импортировать три файла и добавить theme класс в самый первый div внутри вашего App.js , что-то вроде этого:

 function App() {

  return (
    <div className={`App theme-${this.state.theme}`}>
    ...
    </div>
  );
}
  

Вы бы импортировали все три scss файла, а затем внутри, скажем, DarkTheme.scss, вы можете сделать следующее:

 // ThemeDark.scss
.theme-dark {

  h1 {
    color: white;
  }

  .navigation {
     background-color: darkblue;
  }
}
  

 // ThemeLight.scss
.theme-light {

  h1 {
    color: black;
  }

  .navigation {
     background-color: lightgray;
  }
}
  

Et cetera. В моем случае я всегда использую облегченную версию, поскольку по умолчанию всегда импортируется, но, возможно, было бы неплохо сделать это так, как вы предлагаете, и иметь файл css, нейтральный к теме:

 // App.scss
h1 {
   font-size: 2em;
}

.navigation {
   position: absolute;
}
  

Разве вы не можете импортировать App.scss в to LightTheme.scss , а также в to DarkTheme.scss в качестве первой строки?

 @import "../../App.scss";  /*add path to App.scss*/
  

Затем вы можете вызвать либо LightTheme.scss или DarkTheme.scss , который должен работать так, как вы ожидаете.

Редактировать

«Все мои стили находятся в app.scss. Файлы темы содержат только переменные цвета. «

1. Создайте новый файл light-theme.scss

2. Добавьте в него эти 2 строки.

    @import "../../LightTheme.scss";  /*variables*/
   @import "../../App.scss";  /*styles*/
     

3. Создайте еще один новый файл dark-theme.scss

4. Добавьте в него эти 2 строки.

    @import "../../DarkTheme.scss";  /*variables*/
   @import "../../App.scss";  /*styles*/
     

Теперь просто вызовите light-theme.scss или dark-theme.scss, как вы планировали.