Style Hooks

useTheme(name)

A React context hook that provides access to the theme object defined in your ThemeProvider.

Arguments

  • name <string>

    An optional prop for consuming only the key in the theme that matches this string

    import {useTheme} from '@style-hooks/core'
    // Using a global theme
    const FunctionalComponent = () => {
    const theme = useTheme()
    return `My favorite color is ${theme.colors.blue}`
    }
    // Using a specific theme, in this example the
    // theme for useText() / <Text>
    const FunctionalComponent = () => {
    const textTheme = useTheme('text')
    return (
    <span style={{fontSize: `${textTheme.size.sm}rem`}}>
    Hello, I'm a size small
    </span>
    )
    }

CodeSandbox example

Below is a complete useTheme() hook example

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