Theme Provider
In order to style your app, you must wrap it in the ThemeProvider
component.
This component uses the React.Context
API under the hood.
In order to use the ThemeProvider
component, you must pass it a value prop that is a Theme
object.
Please note: at this moment in time, theming isn't fully supported yet! There are certain attributes of the Theme
object that are required so please be sure you have them when providing a custom theme.
Simple theming
The ThemeProvider
Component, you can either override the default styles(shown below) or use your own theme completely.
You can add anything you want to the theme object, as long as you have required properties.
SyntaxError: Unexpected token (1:8) 1 : return (const newTheme = { ^const newTheme = {...defaultTheme,spinnerColor: 'hotpink'}const ThemedApp = () => (<ThemeProvider value={newTheme}><Spinner /></ThemeProvider>)render(<ThemedApp />)Hide code
Nested theming
You can theme certain parts of your app differently by nesting the ThemeProvider
components.
SyntaxError: Unexpected token (1:8) 1 : return (const parentTheme = { ^const parentTheme = {...defaultTheme,spinnerColor: 'hotpink'}const childTheme = {...defaultTheme,spinnerColor: 'blue'}const ThemedParent = ({ children }) => (<ThemeProvider value={parentTheme}><Spinner />{ children }</ThemeProvider>)const ThemedChild = () => (<ThemeProvider value={childTheme}><Spinner /></ThemeProvider>)render(<ThemedParent><ThemedChild /></ThemedParent>)Hide code
Using withTheme
The withTheme
HOC allows you to easily pass the theme object down to your components.
SyntaxError: Unexpected token (1:8) 1 : return (const theme = { ^const theme = {...defaultTheme,myNewButtonStyles: {color: 'white',backgroundColor: 'hotpink',height: 30,borderRadius: '5px',}}const ThemedApp = ({ children }) => (<ThemeProvider value={theme}>{ children }</ThemeProvider>)const MyNewButton = ({ theme }) => (<button style={theme.myNewButtonStyles}>Custom styled button</button>)const MyNewThemedButton = withTheme(MyNewButton)render(<ThemedApp><MyNewThemedButton /></ThemedApp>)Hide code
Using useTheme
The useTheme
hook provides the same functionalities as the withTheme
HOC.
SyntaxError: Unexpected token (1:8) 1 : return (const theme = { ^const theme = {...defaultTheme,myNewButtonStyles: {color: 'white',backgroundColor: 'hotpink',height: 30,borderRadius: '5px',}}const ThemedApp = ({ children }) => (<ThemeProvider value={theme}>{ children }</ThemeProvider>)const MyNewThemedButton = () => {const theme = useTheme()return (<button style={theme.myNewButtonStyles}>Custom styled button</button>)}render(<ThemedApp><MyNewThemedButton /></ThemedApp>)Hide code