Использование переменных Javascript с styleled-компонентами

Question

Я использую styled-компоненты для сборки своих компонентов. Все свойства стиля, которые принимают пользовательские значения, повторно используются во всех моих компонентах (как и должно быть). Имея это в виду, я бы хотел использовать какие-то глобальные переменные, чтобы обновления распространялись на все компоненты без необходимости индивидуального обновления каждого стиля.

Что-то вроде этого:

// 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, но при разработке дизайна повторное использование стилей в компонентах является абсолютной необходимостью. Каковы компромиссы здесь?

Answer 1

В конце концов я понял это, так что вот как вы можете это сделать, по крайней мере, если использовать React.

Вам нужно определить переменные в одном файле и экспортировать их.

// Variables.js

export const FONTSIZE_5 = '20px';

Затем вам нужно импортировать эти переменные в каждый файл компонента.

// Button.js

import * as palette from './Variables.js';

Затем вы можете использовать переменные в ваших стилевых компонентах следующим образом:

const Button = styled.button`
  font-size: ${palette.FONTSIZE_5};
`;

Answer 2

Упаковка <ThemeProvider> Вокруг вашего приложения могут помочь:

https://www.styled-components.com/docs/advanced

const theme = {
  fontColour: 'purple'
}

render() {
  return (
    <ThemeProvider theme={theme}>
      <MyApplication />
    </ThemeProvider>
  )
}

Это даст всем дочерним стилевым компонентам доступ к теме следующим образом:

const MyApplication = styled.section`
  color: ${props => props.theme.fontColour}
`

Или же

const MyFancyButton = styled.button`
  background: ${props => props.theme.fontColour}
`

Или получить доступ к теме через https://www.styled-components.com/docs/advanced

Answer 3

Ваше окончательное решение работает по 2 двум причинам:

1. Простое объявление переменной в файле не привязывает ее к глобальной области видимости для всего приложения, поэтому другие файлы не знают об этом, если не импортированы в.
2. 16pxне является допустимым значением. Его нужно было заключить в кавычки, чтобы сделать его строкой (как вы это сделали с'20px'), или px нужно было удалить.

Я столкнулся с аналогичной ситуацией, за исключением того, что мне нужно, чтобы мои переменные были числами, а не строками, и это тоже работает:

const CELL_SIZE = 12;
const ROWS = 7;
const CELL_GAP = 3;

const BannerGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, ${CELL_SIZE}px);
  grid-template-rows: repeat(${ROWS}, ${CELL_SIZE}px);
  grid-column-gap: ${CELL_GAP}px;
  grid-row-gap: ${CELL_GAP}px;
  grid-auto-flow: column;
`;