Измените .scss с помощью кнопки React
Как изменить @import в соответствии с кнопкой значения в React?
Пример того, как я хочу: у меня this.state.modal = false
.js:
handleChangeEvent = () => {
this.setState({
modal: !this.state.modal
})
}
<button onClick = {this.handleChangeEvent}>Test</button>
и мой .scss:
if (this.state.modal === true) {
@import 'theme/white';
} else {
@import 'theme/black';
}
конечно, я не могу вызвать, если с .scss, но в основном это то, что я хочу
Ответы 3
Вы можете попробовать что-нибудь, как описано в этой публикации на StackOverflow.
https://stackoverflow.com/a/46543835/2853568
Он возвращает обещание, и результатом разрешения обещания является модуль, который вы условно хотели бы импортировать.
я не могу сделать это с .scss
Есть несколько способов создания стилей.
Вы можете добавлять / изменять класс в зависимости от вашего состояния и обрабатывать CSS на основе родительского класса.
<div className = {this.state.modal ? "BlackTheme" : "WhiteTheme" }>
{rest of your content}
</div>
В вашем scss
.BlackTheme {
.button {
background:black;
}
}
.WhiteTheme {
.button {
background:white;
}
}
Здорово! Спасибо!
Есть условный рендеринг для 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;
}
Здорово! Спасибо!
@DanielBarreto Примите этот ответ как решение, если он сработал!
Итак ... Я проверил это, но не работает. Когда я передаю цвет, это работает, но не работает с @import
Добро пожаловать в Stack Overflow, пожалуйста, просмотрите: stackoverflow.com/help/how-to-ask