ReactJS меняет цвет фона нескольких компонентов, используя colors.less - PullRequest
Новая
       25

ReactJS меняет цвет фона нескольких компонентов, используя colors.less

0 голосов
/ 21 сентября 2018

Контекст

Я хочу сделать переключатель, чтобы изменить цвет фона нескольких компонентов, используя colors.less.

Идея

Я надеялся, что вы могли бысделать что-то вроде следующего ...

colors.less 

@primary-color: @white;
@white: #ffffff;
@black: #000000;

index.js 

if (e.target.checked) {
    console.log('toggle on')
    colors.primary-color = @black;
} else {
    console.log('toggle off')
    colors.primary-color = @white;
}

Обратите внимание: это больше псевдокод, чем фактический код.

Результат

Тогда из следующего, каждый компонент, который использовал @ primary-color, будетизменить на черный или белый.

Вопросы

Возможно ли это?

Если да, то как?

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете создать файл colors.less, как вы предлагали, в котором вы определяете цвета. 

// colors.less
@white: #ffffff;
@black: #000000;

И в файле меньше компонента импортируйте этот файл меньше и примените значения к classNames: 

Import 'colors.less';
.isActive {
    background: @white;
}
.isInactive {
    background: @black;
}

И теперь вы применяете эти classNames с логикой, которую вы хотите. 

<div className={checked ? "isActive" : "isInactive}/>
...