Theming

Edit this page

Theming is provided by the library emotion-theming.

npm install -S emotion-theming

Add ThemeProvider to the top level of your app and access the theme with props.theme in a styled component or provide a function that accepts the theme as the css prop. The api is laid out in detail in the documentation.

/** @jsx jsx */
import { jsx } from '@emotion/core'
import styled from '@emotion/styled'
import { ThemeProvider } from 'emotion-theming'

const theme = {
  colors: {
    primary: 'hotpink'
  }
}

const SomeText = styled.div`
  color: ${props => props.theme.colors.primary};
`

render(
  <ThemeProvider theme={theme}>
    <SomeText>some text</SomeText>
    <div css={theme => ({ color: theme.colors.primary })}>
      some other text
    </div>
  </ThemeProvider>
)
some text
some other text
Next:Labels