ThemeProvider

ThemeProvider passes a single theme object down to its children. It can be used multiple times to compose different themes for different parts of the component tree. It uses React's context(new tab) APIs to pass down the theme.

Nested themes automatically get combined if not explicitly prevented. This helps if you only want to change or add a single value without repeating the whole theming used before.

FelaComponent, createComponent, connect and useFela automatically receive the theme as well.

Props

Property	Type	Default	Description
theme	Object		An object containing any theming information
overwrite	boolean?	`false`	Replace any passed down theme instead of merging it

Imports

import { ThemeProvider } from 'react-fela'
import { ThemeProvider } from 'preact-fela'
import { ThemeProvider } from 'inferno-fela'

Example

const text = ({ theme }) => ({
  backgroundColor: theme.bgColor,
  fontSize: theme.fontSize,
  color: theme.color,
})

const Text = createComponent(text)

const Fragmet = (
  <ThemeProvider theme={{ color: 'red', fontSize: '15px' }}>
    <Text>I am red and 15px sized</Text>
    <ThemeProvider theme={{ color: 'blue' }}>
      <Text>I am blue and 15px sized</Text>
    </ThemeProvider>
    <ThemeProvider theme={{ bgColor: 'yellow' }}>
      <Text>I am red and 15px sized with a yellow background</Text>
    </ThemeProvider>
  </ThemeProvider>
)

Overwriting themes

The

overwrite

option help to prevent theme inheritance for nested ThemeProvider components.

const text = ({ theme }) => ({
  fontSize: theme.fontSize,
  color: theme.color || 'red',
})

const Text = createComponent(text)

const Fragment = (
  <ThemeProvider theme={{ color: 'blue', fontSize: 15 }}>
    <Text>I am blue and 15px sized</Text>
    <ThemeProvider overwrite theme={{ fontSize: 20 }}>
      <Text>I am red and 20px sized</Text>
    </ThemeProvider>
  </ThemeProvider>
)