References to theme object aren't working within the Theme UI theme

Question

TLDR

References in my Theme UI theme are being output as static values instead of resolving to the object property/value, meaning I get CSS output such as font-family: heading; where font-family should actually be mapping to text.heading and resolve to something like font-family: Lato, sans-serif.

The issue is the same whether I reference a theme value from within the theme or from a component (using something like variant='text.h1'). Similarly, color references such as colors.primary don't reolve either. It seems like I've done something fundamentally wrong in the configuration but I've uninstalled and re-followed the install steps and I'm getting them same outcome.

How do I make the theme references resolve properly?

Detail

I've installed Rebass and Theme UI using the getting started documentation for each of those libraries. Relevant bits of package.json:

"dependencies": {
    "@emotion/react": "^11.10.5",
    "@mdx-js/react": "^2.2.1",
    "@theme-ui/mdx": "^0.15.4",
    "gatsby": "^5.3.3",
    "gatsby-plugin-image": "^3.3.2",
    "gatsby-plugin-mdx": "^5.3.1",
    "gatsby-plugin-sass": "^6.3.1",
    "gatsby-plugin-sharp": "^5.3.2",
    "gatsby-plugin-theme-ui": "^0.15.4",
    "gatsby-source-filesystem": "^5.3.1",
    "gatsby-transformer-sharp": "^5.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rebass": "^4.0.7",
    "sass": "^1.57.1",
    "theme-ui": "^0.15.4",
  }

I've created my theme in basic form as per the docs:

const theme = {
  colors: {
    text: '#202020',
    background: '#f2f7f8',
    primary: '#095463',
    secondary: '#ff0000',
    black: '#202020',
    white: '#fefefe',
  },
  fonts: {
    body: 'Lato, sans-serif',
    heading: 'Lato, sans-serif',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700
  },
  text: {
    heading: {
      color: 'secondary',
      fontFamily: 'heading',
      fontWeight: 'heading',
    },
    h3: {
      color: 'secondary',
      fontFamily: 'heading',
      fontWeight: 'heading',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      color: 'primary'
    },
    h1: {
      variant: 'text.heading',
      fontSize: 5,
    },
    h3: {
      variant: 'text.h3',
      fontSize: 5,
    },
  },
}

export default theme

The root styles get applied correctly to the html element (e.g. font and colours as CSS variables such as --theme-ui-colors-primary: #095463; but none of the references within the theme work and neither do they when used on a component as a variant or as an sx prop.

If I inspect a heading, the CSS attributes show the static values (e.g. 'heading') rather than the references to the theme object:

Answer 1

After I had updated from emotion-theming to @emotion/react I got this problem, I found a problem caused here ThemeProvider not working with Rebass.

The ThemeProvider from 'emotion-theming' and Rebass use the same ThemeContext from @emotion/core, but the ThemeProvider from '@emotion/react use @emotion/react's ThemeContext and Rebass still using @emotion/core's ThemeContext, @iChenLei suggests using emotion-theming or push Rebass library author to support @emotion/react(But it's looks like impossible cause Rebass is not a active project currently).