ThemeUIProvider

import { ThemeUIProvider } from 'theme-ui'

function ThemeUIProvider(props: ThemeProviderProps): JSX.Element

import { ThemeUIProvider } from 'theme-ui'

const theme = {
  colors: {
    primary: 'tomato',
    background: 'white',
    text: 'black',
  },
  fonts: {
    body: 'Georgia, serif',
  },
}

function App() {
  return (
    <ThemeUIProvider theme={theme}>
      <div sx={{ color: 'primary' }}>
        Hello Theme UI
      </div>
    </ThemeUIProvider>
  )
}

<ThemeUIProvider theme={{ colors: { primary: 'tomato' } }}>
  <ThemeUIProvider theme={(outerTheme) => ({
    ...outerTheme,
    colors: {
      ...outerTheme.colors,
      secondary: 'cyan',
    },
  })}>
    <Component />
  </ThemeUIProvider>
</ThemeUIProvider>

const theme = {
  fonts: {
    body: 'Georgia, serif',
  },
  lineHeights: {
    body: 1.5,
  },
  fontWeights: {
    body: 500,
  },
  styles: {
    root: {
      fontFamily: 'body',
      fontWeight: 'body',
      lineHeight: 'body',
    },
  },
}

<ThemeUIProvider theme={theme}>
  <App />
</ThemeUIProvider>

<ThemeUIProvider theme={{ colors: { primary: 'tomato' } }}>
  <ThemeUIProvider theme={{ colors: { secondary: 'cyan' } }}>
    {/* Has access to both primary and secondary colors */}
    <Component />
  </ThemeUIProvider>
</ThemeUIProvider>