Next.js 下一个JS Themeprovider未获得自定义样式

我是新来的下一代JS，不明白为什么我的ThemeProvider没有接收和使用我的背景色

我觉得我已经正确地复制了教程，所以我必须很接近，对吗

我的错误是

TypeError:无法读取未定义的属性“background”

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

---

我愚蠢地从“主题ui”中使用了

import{ThemeProvider}

，而不是从“样式化组件”中使用

import{ThemeProvider}

export const lightTheme = {
    background: 'red'
  }