Next JS Themeprovider not getting custom styles

Question

I'm new to Next JS and can't figure out why my background color is not being received and used by my ThemeProvider.

I feel I've copied the tutorials correctly so I must be close right?

My error is 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

I was stupidly using import { ThemeProvider } from 'theme-ui' instead of import { ThemeProvider } from 'styled-components'