如何解决下一个JS Themeprovider无法获得自定义样式
我是Next JS的新手,无法弄清楚为什么我的ThemeProvider无法接收和使用我的背景色。
我觉得我已经正确地复制了教程,所以我必须很接近吗?
我的错误是TypeError: Cannot read property 'background' of undefined
globals.js
import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
*,*::after,*::before {
Box-sizing: border-Box;
}
body {
background: {({ theme }) => props.theme.background};
}
_app.js
import { GlobalStyles } from '../styles/globals';
//Theming
import { ThemeProvider } from "theme-ui";
import { lightTheme } from '../styles/themes/theme';
function App({ Component,pageProps }) {
return (
<Provider session={pageProps.session}>
<ThemeProvider theme={lightTheme}>
<GlobalStyles />
<Component {...pageProps} />
</ThemeProvider>
</Provider>
)
}
export default App
theme.js
export const lightTheme = {
background: 'red'
}
解决方法
我很愚蠢地使用import { ThemeProvider } from 'theme-ui'
而不是import { ThemeProvider } from 'styled-components'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。