Adding base styles

Best practices for adding your own global base styles on top of xstyled.

Even if xstyled already includes a set of base style with Preflight, you could need to add more base styles in your project.

Create Global Styles

xstyled offers a unified method for styled-components and Emotion to create global styles.

import { createGlobalStyle } from '@xstyled/...'

const GlobalStyle = createGlobalStyle`
  body {
    color: #333;
  }
`

function App() {
  return (
    <>
      <GlobalStyle />
      {/* ... */}
    </>
  )
}

Automatic Theming

Of course automatic theming described in enhanced styled documentation also applied in createGlobalStyle:

import { createGlobalStyle } from '@xstyled/...'

const GlobalStyle = createGlobalStyle`
  body {
    /* Use theme.colors['text-color'] */
    color: text-color;
  }
`

function App() {
  return (
    <>
      <GlobalStyle />
      {/* ... */}
    </>
  )
}