DocumentationCommunityGitHubSlackSpectrum

Getting Started

IntroductionInstallCSSStyled ComponentsCompositionObject StylesNested SelectorsMedia QueriesGlobal Styles

Advanced

KeyframescxServer Side RenderingAttaching PropsThemingLabelsConfigurable ImportsInstances

Theming

Edit this page

Themes are 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. The api is laid out in detail in the documentation.

import styled from 'react-emotion'
import { ThemeProvider } from 'emotion-theming'

const theme = {
  borderRadius: '50%',
  borderColor: '#BF67AD'
}

const Avatar = styled('img')`
  width: 96px;
  height: 96px;
  border-radius: ${props => props.theme.borderRadius};
  border: 1px solid ${props => props.theme.borderColor};
`

render(
  <ThemeProvider theme={theme}>
    <Avatar src={logoUrl} />
  </ThemeProvider>
)
Previous Page
Attaching Props
Next Page