Theme-ui: Components don't receive theme object

[cwgw]

Describe the bug
In Gatsby site using gatsby-plugin-theme-ui, components don't receive the theme but appear to receive an empty object.

To Reproduce
Steps to reproduce the behavior:

1. gatsby new site
2. Install theme-ui and gatsby-plugin-theme-ui
   
   
   
   1. cd site && yarn add theme-ui gatsby-plugin-theme-ui
   
   
   2. add gatsby-plugin-theme-ui to plugins array in gatsby-config
   
   
   3. add src/gatsby-plugin-theme-ui/index.js and add a variant with some basic styling
   
   
3. In src/pages/index.js include a Box component from Theme UI and set it's variant prop
4. Observe that variant prop has no effect
5. Scratch head

Expected behavior
Components should be styleable via variant and other props

Additional context
I'm not sure what I'm doing wrong. I've happily used Theme UI in other projects with success.

Inspecting with React Dev Tools shows that the top level ThemeProvider does in fact have my theme. Using useThemeUI in any component successfully returns an object that contains my theme. But, no variant or Styled System props have an effect. The sx prop adds styles to Theme UI components, but is not theme-aware unless I include the jsx pragma.

Doing something like this…

import styled from "@emotion/styled"

const CustomComponent = styled("div")(
  props => {
    console.log({ props });
    return {};
  }
)

…logs an empty theme object.

[cwgw]

Here's a repo

[cwgw]

I wonder if this is the same as #1143 and #1146 ?

[cwgw]

I was able to solve this using this suggestion from @jxnblk.

I did indeed have a dependency conflict—specifically @mdx-js/react. It seems gatsby-recipes specifies a newer version of the package.

Sticking this in my package.json gets things working again.

  "resolutions": {
    "@mdx-js/react": "2.0.0-next.7"
  },