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

Question

[eugenedrvnk]

В проектах довольно часто использую 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')}

Какой вариант будет более адекватным? Или же есть иные нормальные практики, дабы не использовать такой подход?

Comments

[Александр]

Я в своих проектах опираюсь на font-size.
Допустим базовый стиль:

html {
  font-size: 10px; /* так проще считать потом */
}

а потом берем все размеры от него в rem (местами для удобства размеры в em):

.header {
  font-size: 3rem;
  margin: 0 0 1.5em;
}

.content {
  padding: 2rem;
}

а потом в медиа запросах просто меняем font-size у html в зависимости от разрешения