Как динамически изменять значения ThemeProvider в стилизованных компонентах? ⇐ CSS

[Anonymous]

В своих проектах я использовал некоторые глобальные переменные CSS, такие как --space-unit, --header-height и другие.
И это выглядело так:

Код: Выделить всё

  --space-unit: 10px;
--header-height: 70px;

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

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

И для разных разрешений экрана переменные были подходящими. как мне реализовать это с помощью стилизованных компонентов? То есть я создаю ThemeProvider, ввожу в него начальные значения spaceUnit и headerHeight, но как потом его динамически менять?

Подробнее здесь: https://stackoverflow.com/questions/644 ... components