Реагируйте на тему компонента, используя переменные sass, в зависимости от значения React prop

Question

Я не могу найти лучшего решения для темы. У меня есть sass-файл с переменными:

vars.scss:

$colors: (
    dark: (
        theme1: #0096dc,
        theme2: #eb8200,
        …
    ),
    …
);

Сейчас я прохожу theme Опора для всех компонентов, которые должны иметь определенный стиль в зависимости от того, какую страницу просматривает пользователь. В React я строю имя класса следующим образом:

<div className={styles[`button${theme ? `-${theme}` : ``}`]}>{children}</div>

и в sass я делаю:

@import 'vars';

.button{
    /* basic styles */
    font-size: 14px;
    border: 1px solid;

    @each $theme, $color in map-get($colors, dark) {
        &-#{$theme} {
            @extend .button;
            border-color: $color;
            color: $color;
        }
    }
}

Но это абсолютно неудобно, потому что мне нужно размещать такой код каждый раз, когда мне нужно стилизовать элемент в зависимости от темы.

Есть решения, как загружать разные файлы с переменными для их размещения в веб-пакете, но я получаю theme prop от redux, поэтому у webpack нет доступа к этому prop.

Кроме того, я не могу найти решение для передачи свойства из реагирующего компонента в sass. Только напротив.

Нет способа использовать переменные в импорте в sass. Все еще не реализовано.

К сожалению, невозможно использовать подход CSS-in-JS в текущем проекте.

Пожалуйста, помогите найти лучший подход.

Answer 1

Я бы сделал это функциональным компонентом без сохранения состояния.

function BrightBox(props){
  <div className={styles[`button${theme ? `-${theme}` : ``}`]}>
    {props.children}
  </div>
}

Затем импортируйте его и используйте. Нет необходимости передавать тему.

{user.notice ? 
  <BrightBox>
    there are {user.notice.issues.size} outstanding issues!
  </BrightBox>
 : null
}