Реакция темы компонента с использованием переменных sass в зависимости от значения React prop

Question

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

vars.scss:

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

На данный момент я прохожу theme опору для всех компонентов, которые должны иметь некоторый стиль в зависимости от того, на какой странице пользователь просматривает. В React я строй имени класса, как это:

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

и в дерзости я:

@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; 
     } 
    } 
} 

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

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

Как и я, я не могу найти решение для передачи свойства от реагирующего компонента к 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 
}