Style Hooks


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


  • 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 ${}`
    // Using a specific theme, in this example the
    // theme for useText() / <Text>
    const FunctionalComponent = () => {
    const textTheme = useTheme('text')
    return (
    <span style={{fontSize: `${}rem`}}>
    Hello, I'm a size small

CodeSandbox example

Below is a complete useTheme() hook example

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