@eugenedrvnk

Как динамически обовлять значения в теме styled-components?

В проектах довольно часто использую css переменную в духе --space-unit, которой задаю следующие стили :

--space-unit: 10px;

  @media (max-width: 991px) {
    --space-unit: 7px;
  }
  
  @media (max-width: 991px) {
    --space-unit: 5px;
  }


И дальше использую её как-то так :

margin-bottom: calc(20 * var(--space-unit))

И соответственно при уменьшении экрана, будет уменьшаться и маржин.
Как можно адекватно подобную систему внедрить в styled-components?
Ведь, там в основном для разного рода переменных используют не css-variables, а обычные js объекты, которые суют в ThemeProvider, но пока не могу понять как адекватно сделать так, что бы, я к примеру задал в теме :

const theme = {spaceUnit: 10}

И дальше при разных разрешениях это значение менялось, как и в ситуации с цсс переменой.
Лично я вижу тут 2 решения, это либо писать функцию, в которую прокидывать какие-то дополнительные парамтры с брейкпоинтами и всё это мониторить, либо же просто оставить --space-unit в css, но при этом занести её в ThemeProvider :

const theme = {spaceUnit: 'var(--space-unit')}

Какой вариант будет более адекватным? Или же есть иные нормальные практики, дабы не использовать такой подход?
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы