Theme-ui: Using sx pragma with Emotion - Global component for global styles

[ehowey]

Hello,

I am trying to use the sx pragma with the Global styles component from emotion to allow me to insert some global styles. Specifically I am wanting to set a global link variable that can be changed through the theme-ui theme spec. Something like this:

"a": {
color: "link.link"
},
"a:visited": {
color: "link.visited"
},
"a:active": {
color: "link.active"
},
"a:focus": {
color: "link.focus"
border: "2px dotted #000"
}

Currently my global styles looks like this:

<Global
          styles={css`
            html {
              box-sizing: border-box;
            }

            *,
            *:before,
            *:after {
              box-sizing: inherit;
            }

            body {
              margin: 0;
              padding: 0;
            }
          `}
        />

I would like to do something like this:

<Global
          sx= {{
         ...styles go here...with access to theme-ui theme files.
        }}
        />

Is this possible?

[ehowey]

I did a bit more digging and am realizing that a partial solution - will work for me - is to use the styles object in the theme-ui file to specify these values. I will close this now.

[jxnblk]

The Emotion Global component's styles prop accepts a function, where you can use values from the theme context – <Global styles={theme => ({ })} />

[ehowey]

Thanks for all the help Jackson - much appreciated. You will see the results with a Theme Jam submission!

[CanRau]

Uh amazing, had to pass it through tho 😅

<Global styles={theme => theme.styles.Global(theme)} />

[heycassidy]

@ehowey I know I'm a year late to this, but @jxnblk's answer, while extremely helpful, doesn't allow you to use theme-aware values that you would get if you could use the sx prop.

You can pass the css function (https://theme-ui.com/api#css) into the styles prop to achieve this:

import { css } from 'theme-ui'

<Global styles={css({
  h1: {
    fontSize: 5
  }
})(theme)} />

In this example, the value of fontSize is an index of the fontSizes array in theme.js

// theme.js

fontSizes: [
    12, 14, 16, 20, 24, 32, 48, 64,
]