下一个JS Themeprovider未获取自定义样式

Question

我刚接触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'
  }

Answer 1

我愚蠢地使用import { ThemeProvider } from 'theme-ui'而不是import { ThemeProvider } from 'styled-components'