Style Hooks

css prop

Because style hooks are written with Emotion all of your components get to use its powerful css prop

While an incredibly cool feature, there is a little bit of configuration required in order to get it working properly. See Emotion's documentation on the css prop for detailed instructions about how to get it up and running.

If you opt not to use the css prop you can skip the above configuration. It is not a pre-requisite for using @style-hooks.

Once configured, a bunch of cool patterns emerge.

1. You get access to your Style Hooks theme

/** @jsx jsx */
import {jsx, css} from '@emotion/core'
// Use in plain React components
const Component = () => (
<span css={
theme => css`
font-size: ${theme.text.size.lg}rem;
@media ${theme.mediaQueries.hiDpi} {
font-smoothing: antialias;
}
`
}>
Hello
</span>
)
// Use in Style Hooks components
// (Assumes you've created a <Text/> component)
const Component = () => (
<Text css={
theme => css`
color: ${theme.colors.primary};
@media ${theme.breakpoints.phone} {
font-size: ${theme.text.size.md}rem;
}
@media ${theme.breakpoints.desktkop} {
font-size: ${theme.text.size.lg}rem;
}
`
}>
Hello
</Text>
)

2. You can quickly add styles to your component using a css template literal

/** @jsx jsx */
import {jsx, css} from '@emotion/core'
// Use in plain React components
const Component = () => (
<span css={css`user-select: none;`}>
Hello
</span>
)

3. Or if you like, an object without worrying about importing css from @emotion/core

/** @jsx jsx */
import {jsx} from '@emotion/core'
// Use in plain React components
const Component = () => (
<span css={{userSelect: 'none'}}>
Hello
</span>
)

4. Use an array to add several styles

/** @jsx jsx */
import {jsx} from '@emotion/core'
import {someStyleA, someStyleB, someStyleC} from './styles'
// Use in plain React components
const Component = () => (
<span css={[someStyleA, someStyleB, someStyleC]}>
Hello
</span>
)
Continue to Create a Style Hook
NPM icon
MIT License ©2019
Jared Lunde