ThemeProvider

This component will inject the theme in all your components. It allows you also to customize this theme.

Please note that this component should be the first component imported in your project ! Otherwise the style may be broken.

Example

Theme declaration :

const Square = styled('div')`
  height: 100px;
  width: 100px;
  background-color: ${({ theme }) => theme.components.square.background};
  border: 2px solid ${({ theme }) => theme.components.square.border};
`

const theme = {
  colors: {
    primary: 'grey',
  },
  factories: [
    {
      factory: ({ colors }) => ({
        square: {
          background: colors.primary,
          border: colors.neutral,
        },
      }),
      name: 'components',
    },
  ],
}

const colorOverride = {
  colors: {
    primary: 'black',
  },
  components: {
    square: {
      border: 'red',
    },
  },
}

render(
  <ThemeProvider theme={theme}>
    <>
      <Square />
      <ThemeProvider otherTheme={colorOverride}>
        <Square />
      </ThemeProvider>
    </>
  </ThemeProvider>,
)

const Square = styled('div')`
  height: 100px;
  width: 100px;
  background-color: ${({ theme }) => theme.components.square.background};
  border: 2px solid ${({ theme }) => theme.components.square.border};
`
const theme = {
  colors: {
    primary: 'grey',
  },
  factories: [
    {
      factory: ({ colors }) => ({
        square: {
          background: colors.primary,
          border: colors.neutral,
        },
      }),
      name: 'components',
    },
  ],
}
const colorOverride = {
  colors: {
    primary: 'black',
  },
  components: {
    square: {
      border: 'red',
    },
  },
}
render(
  <ThemeProvider theme={theme}>
    <>
      <Square />
      <ThemeProvider otherTheme={colorOverride}>
        <Square />
      </ThemeProvider>
    </>
  </ThemeProvider>,
)

Props

Name	Type	Default value	Description
children required	node	null	The child node.
otherTheme	object	{}	Overload a part of the theme. Will be merged to the actual theme. The overload can be constants, or functions taking the constant part of the theme as parameter.
theme	object	{}	The theme overloading. If not given, the theme will be taken from the context. The overload can be constants, or functions taking the constant part of the theme as parameter.