Emotion: Styling Global component using styled approach is not possible.

[AlexanderProd]

I was trying to create a Global style using styled on the Global component. But it seems like this is not possible yet. I feel like this would be a nice feature to add since I prefer the styled approach to using inline styles with the Global component.

But doing so results in an error in the browser console saying

I'm using emotion with create-react-app

• emotion version: 10.0.7
• react version: 16.8.3

Relevant code:

import styled from '@emotion/styled'
import { Global } from '@emotion/core'

export const GlobalStyle = styled(Global)`
  * {
    background-color: blue;
  }
`

What you did:
Applied style to Global component using styled

export const GlobalStyle = styled(Global)`
  * {
    background-color: blue;
  }
`

What happened:
Error in browser console:
It looks like you're using the css prop on Global, did you mean to use the styles prop instead?

Reproduction:
Use styled on Global component.

Suggested solution:
Add functionality to use styled on Global component.

[piavgh]

@AlexanderProd : Hi, you closed this issue yourself. So how did you solve this?

[AlexanderProd]

@piavgh It's not the most elegant way but I've been doing it like that.

export const GlobalStyle = props => (
  <Global
    {...props}
    styles={css`
      html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }
      body {
        margin: 0;
        font-family: "Roboto","HelveticaNeue","Helvetica Neue",sans-serif;
      }
    `}
  />
)

[piavgh]

Thank you. Basically this is using css as in the official guide.
I thought that there is a way of using "styled" approach