Style Hooks


A React component that passes the theme object down the component tree via context. Using a <ThemeProvider> allows you to access your theme in style hooks, css props, the useTheme() hook, and <ThemeConsumer>. Check out the Theming page for more examples.


  • theme <object>

    The theme you'd like your ThemeProvider's ancestors to have access to. The current theme will change any time this value changes. The default theme is:

    let defaultTheme = {
    breakpoints: {
    // 0px
    phone: 'only screen and (min-width: 0em)',
    // 560px
    tablet: 'only screen and (min-width: 35em)',
    // 1280px
    desktop: 'only screen and (min-width: 80em)',
    // the breakpoints delimeter is configurable :)
    breakpointsDelimiter: ':'

CodeSandbox example

Below is a complete ThemeProvider example as it is used with the useStyles() hook

Continue to <ThemeConsumer>
NPM icon
MIT License ©2019
Jared Lunde