下一个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'