Style Hooks

createStyleHook(name, styles)

createStyleHook() is a shortcut for creating a style hook with useStyles()


  • name <string> required

    This is the key name you'll use for this hook when configuring it in your theme. As such, it should be unique. Names are important because they allow your hook to use powerful features like the kind prop and defaultProps in your theme. They also provide organization to your theme allowing you to provide a name argument to useTheme('name').

  • styles <object> required

    This is the object that defines your component's style props. The key names of this object become prop names in your component and the value handles the creation of style definitions. See creating style props on the useStyles page learn the numerous ways you can generate styles.


// Using our shortcut
import {css} from '@emotion/core'
import {createStyleHook} from '@style-hooks/core'
const useBox = createStyleHook('box', {
w: value => css`width: ${value}px;`
// The above is the same as:
import {css} from '@emotion/core'
import {useStyles} from '@style-hooks/core'
const useBox = props => useStyles(
w: value => css`width: ${value}px;`
Continue to useStyles()
NPM icon
MIT License ©2019
Jared Lunde