下一个 JS Themeprovider 没有获取自定义样式答案

【问题标题】：Next JS Themeprovider not getting custom styles下一个 JS Themeprovider 没有获取自定义样式
【发布时间】：2020-10-08 07:39:38
【问题描述】：

我是 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

主题.js

export const lightTheme = {
    background: 'red'
  }

【问题讨论】：

标签： next.js themeprovider

【解决方案1】：

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

【讨论】：