Struggling with theme-aware global styles

[jenkshields]

Kia ora!

I'm trying to use <Global> from @emotion/react to set a few global styles (in order to theme some portable text I can't access directly), but I'm having trouble using variables from my theme. Setting the styles directly works no problem!

Here's the code:

import * as React from "react";
import NextApp from "next/app";
import { ThemeProvider } from "theme-ui";
import theme from "../utils/theme";
import { Global } from '@emotion/react'

const App = ({ Component, pageProps }) => {

  return (
    <>
      <Global
        styles={(theme) => ({
          'h6': {
            fontFamily: theme => `${theme.fonts.heading}`,
            color: theme => `${theme.colors.primary}`,
          }
        })}
      />
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default App

Using Next.js 10.0.5 and theme-ui 0.6.0-alpha.4

Thanks in advance!

[lachlanjc]

Hey! My guess is that the issue is you're using the theme as a function, but outside the ThemeProvider which is providing the necessary Context. If you don't need the values to be context-aware (e.g. primary is the same in all color modes), then you could just remove the theme => part inside Global, since the theme variable is already imported/defined. If you need the values to be context-aware, try moving the Global inside the ThemeProvider (instead of using the fragment). Let me know!