UseThemeUI в ThemeUI не содержит useColorMode

Question

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

1. Импортировать useColorMode

import React from 'react'
import { ColorMode, ThemeProvider, useColorMode } from 'theme-ui'
const ThemeWrapper = (props) => {
  const [colorMode, setColorMode] = useColorMode() // error
  //...
}

Вместо этого я получаю сообщение об ошибке: [useColorMode] требует компонента ThemeProvider

2. Импортировать useThemeUI

import { ColorMode, ThemeProvider, useThemeUI } from 'theme-ui'
const ThemeWrapper = (props) => {
  const context = useThemeUI()
  const { setColorMode } = context
  //...
}

Позже я установил, что setColorMode не является функцией

Изучая это context с помощью console.log, он содержит следующее:

{
  components: Object { p: {…}, b: {…}, i: {…}, … }
  emotionVersion: "10.0.27"
  theme: null
}

useColorMode нигде не найти.

Что я делаю не так?

---

Мой текущий код:

.storybook / config.js

import React, { useEffect } from 'react'
import addons from '@storybook/addons';
import { addDecorator, configure } from '@storybook/react';
import { ColorMode, ThemeProvider, useThemeUI } from 'theme-ui'
import theme from '../theme'

const channel = addons.getChannel();

const ThemeWrapper = (props) => {
  const context = useThemeUI()
  const { setColorMode } = context

  console.log(context)

  const setDarkMode = isDark => setColorMode(isDark ? 'dark' : 'default')

  useEffect(() => {
    channel.on('DARK_MODE', setDarkMode);
    return () => channel.removeListener('DARK_MODE', setDarkMode);
  }, [channel, setColorMode]);

  return (
    <ThemeProvider theme={theme}>
      <ColorMode/>
      {props.children}
    </ThemeProvider>
  );
}

addDecorator(renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>);

configure([
  require.context('../components', true, /\.stories\.(jsx?|mdx)$/),
  require.context('../stories', true, /\.stories\.(jsx?|mdx)$/)
], module);

Answer 1

Я спросил здесь: https://github.com/system-ui/theme-ui/issues/537, и мне удалось исправить свой проблемный код.

Ошибка возникает из-за функции useColorMode не вызывается внутри <ThemeProvider>.

Я изменил свой конфигурационный файл на следующий, чтобы уменьшить проблему. И это устранило мою проблему.

import React, { useEffect } from 'react'
import addons from '@storybook/addons';
import { addDecorator, configure } from '@storybook/react';
import { ColorMode, ThemeProvider, useColorMode } from 'theme-ui'
import theme from '../theme'

const channel = addons.getChannel();

const ThemeChanger = () => {
  const [colorMode, setColorMode] = useColorMode();

  const setDarkMode = isDark => setColorMode(isDark ? 'dark' : 'default')

  useEffect(() => {
    channel.on('DARK_MODE', setDarkMode);
    return () => channel.removeListener('DARK_MODE', setDarkMode);
  }, [channel, setColorMode]);

  return <div/>
}

const ThemeWrapper = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <ThemeChanger/>
      <ColorMode/>
      {children}
    </ThemeProvider>
  );
}

addDecorator(renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>);

configure([
  require.context('../components', true, /\.stories\.(jsx?|mdx)$/),
  require.context('../stories', true, /\.stories\.(jsx?|mdx)$/)
], module);