reactjs - ThemeUI 的 useThemeUI 不包含 useColorMode
问题描述
我正在尝试在 Rebass 中使用主题,它建议使用 Theme UI 进行主题化。遵循以下指南后,我无法开始setColorMode
编写我的故事书。
- 进口
useColorMode
import React from 'react'
import { ColorMode, ThemeProvider, useColorMode } from 'theme-ui'
const ThemeWrapper = (props) => {
const [colorMode, setColorMode] = useColorMode() // error
//...
}
我收到此错误消息:[useColorMode] 需要 ThemeProvider 组件
- 进口
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);
解决方案
我在这里问: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);
推荐阅读
- rest - Meteor simple:rest 包不认天文包方法
- c# - 无法将带有 [] 的索引应用于“int”类型的表达式
- java - 在while循环中只执行一次
- kubernetes - 在 kubernetes 集群上运行 mysql 时如何持久化
- pandas - 如何根据 CSV 文件中的数据检索和裁剪图像?
- angular - 使用 Angular 6 登录获取请求
- graph - Neo4j 用户定义函数无法安装
- ruby-on-rails - 根据输入值,让 Rails 的 number_to_percentage 输出动态的小数位数?
- python - 如何让pycharm加载anaconda环境变量
- regex - 正则表达式选择匹配的一部分