Using sx pragma with Emotion - Global component for global styles

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?

[jxnblk]

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

[CanRau]

Uh amazing, had to pass it through tho 😅

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