Как повторно использовать ThemeProvider с styled-компонентами? - PullRequest
Новая
       25

Как повторно использовать ThemeProvider с styled-компонентами?

0 голосов
/ 07 ноября 2019

Я использую стилевые компоненты в monorepo, построенном с рабочими пространствами пряжи . Структура папок выглядит следующим образом: 

- packages
  - package-a
  - package-b
  - theme

В theme я экспортирую значение по умолчанию ThemeProvider, например: 

const defaultTheme = { ... };

export default function ThemeProvider({ children }) {
  return <StyledThemeProvider theme={defaultTheme}>{children}</StyledThemeProvider>;
}

Этот код передается с помощью @ babel/ предустановка реагируют . Вывод импортируется в package-a и package-b (оба являются проектами create-реагировать на приложение) и добавляется как компонент верхнего уровня.

, но я получаю эту ошибку при попытке повторного использования темыв любом из этих двух пакетов:

index.js: 1375 Компонент styled.div (.sc-fzXfNf) использует «props.theme» в своих стилях, но тема не была предоставлена ​​через prop или ThemeProvider.

Я зарегистрировал props, а объект theme пуст ({}). Почему это? Можно ли здесь делать то, что я хочу?

1 Ответ

0 голосов
/ 13 ноября 2019

Кажется, я просто ошибочно использовал разные версии React в двух пакетах. Я синхронизировал свои зависимости, очистил node_modules, и теперь написанный мной код прекрасно работает: 

const defaultTheme = { ... };

export default function ThemeProvider({ children }) {
  return <StyledThemeProvider theme={defaultTheme}>{children}</StyledThemeProvider>;
}

Примечание: это внутри monorepo рабочей области пряжи, не знаю, как это работает с другими инструментами.

...