Изменить .scss с помощью кнопки React

Question

Как изменить @import в соответствии со значением в React?

Пример того, как я хочу: у меня this.state.modal = false

.js:

handleChange = () => {
  this.setState({
    modal: !this.state.modal
  })
}
<button onClick={this.handleChange}>Test</button>

и мой .scss:

if(this.state.modal === true) {
  @import 'theme/white';
} else {
  @import 'theme/black';
}

конечно, я не могу позвонить, если с .scss, но в основном это то, что я хочу

Answer 1

Существует несколько способов создания стилей.

Вы можете добавлять / изменять класс в зависимости от вашего состояния и обрабатывать CSS на основе родительского класса.

<div className={this.state.modal ? "BlackTheme" : "WhiteTheme" }>
   {rest of your content}
</div>

В вашем scss

.BlackTheme {
   .button {
       background:black;
   }
}


.WhiteTheme {
   .button {
       background:white;
   }
}

Answer 2

Существует условный рендеринг для SASS, где вы можете, например, использовать миксины, упомянутые здесь https://stackoverflow.com/a/13879344/7296909 или здесь https://github.com/sass/sass/issues/451#issuecomment-359489037

Однако вы не можете установить какие-либо переменные в SASS с JS.Однако, как упоминалось @ eramit2010, вы можете установить разные классы в зависимости от значения, например:

const color = this.state.modal === true ? 'white' : 'black';
const className = ´theme ${color}´;

, а затем в scss:

%loadFileWhite {
  @import "theme/white";
}

%loadFileBlack {
  @import "theme/black";
}

.theme .white{
    @extend %loadFileWhite;
}

.theme .black{
    @extend %loadFileBlack;
}

Answer 3

Вы можете попробовать что-то, как описано в этом сообщении StackOverflow.

https://stackoverflow.com/a/46543835/2853568

Возвращает обещание, а результатом разрешения обещания является модуль, который вы условно хотели бы импортировать.