2

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:

enter image description here

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
onebc
  • 398
  • 2
  • 10

1 Answers1

0

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).

Abdul Fattah Boshi
  • 333
  • 1
  • 4
  • 18