Разве это не только для статических тем хотя? С этим решением вы не сможете визуализировать изменения в переменной. Я бы пошел с ответом @Ricardinho, поскольку это позволяет динамически обновлять тему; через реальный объект.
ользуюстилизованных-компоненты построить мои компоненты. Все свойства стиля, которые принимают пользовательские значения, повторно используются во всех моих компонентах (как и должно быть). Имея это в виду, я бы хотел использовать какие-то глобальные переменные, чтобы обновления распространялись на все компоненты без необходимости обновлять каждый стиль отдельно.
Что-то вроде этого:
// Variables.js
var fontSizeMedium = 16px;
// Section.js
const Section = styled.section`
font-size: ${fontSizeMedium};
`;
// Button.js
const Button = styled.button`
font-size: ${fontSizeMedium};
`;
// Label.js
const Label = styled.span`
font-size: ${fontSizeMedium};
`;
Я полагаю, что я неправильно понимаю синтаксис? Кроме того, я знаю, что глобальные переменные не рекомендуются в Javascript, но при разработке дизайна повторное использование стилей в компонентах является абсолютной необходимостью. Каковы компромиссы здесь?