Emotion CSS Theming reference

emotion-theming.js

import { Global, css } from '@emotion/core'
import styled from '@emotion/styled'
import { ThemeProvider, useTheme } from 'emotion-theming'

import { reset } from '~/src/global-styles/reset'

const Headline = styled.h1`
  color: ${props => props.theme.color};
  font-size: 28px;
`

const funkyColor = theme => css`
  background: papayawhip;
  color: ${theme.color};
`

const commonMargin = theme => css`
  margin-top: 10px;
  margin-bottom: ${theme.baseSpacing};
`

const Title = props => (
  <h1
    css={theme => css`
      ${funkyColor(theme)} /* composing styles */
      ${commonMargin(theme)} 
      font-size: 42px;
    `}
    {...props} // overriding component styles / passing props
  />
)

const baseTheme = {
  color: 'red',
  baseSpacing: '30px',
}

const MyApp = () => {
  const theme = useTheme()

  return (
    <ThemeProvider theme={baseTheme}>
      {/* Setting global styles */}
      <Global styles={[reset]} />
      {/* accessing theme via styled component */}
      <Headline>Headline</Headline>
      {/* accessing theme via css prop */}
      <p css={theme => css`color: ${theme.color};`}>Lorem ipsum.</p>
      {/* accessing theme via css prop */}
      <p css={theme => funkyColor(theme)}>Lorem ipsum.</p>
      {/* accessing theme using useTheme hook */}
      <p css={css`color: ${theme.color};`}>Lorem ipsum.</p>
      {/* functional component accessing theme via css prop */}
      <Title>Title</Title>
      {/* attaching props - overriding component styles */}
      <Title css={css` background: papayawhip;`}>Title</Title>
    </ThemeProvider>
  )
}

export default MyApp