Supercharge your styled components with style hooks and themes
import React from 'react'
import {css} from '@emotion/core'
import {createStyleHook} from '@style-hooks/core'
import styled from '@style-hooks/styled'
// Can be used like any other styled component system
let DivA = styled.div`
margin: 0;
`
// The magic happens when you add @style-hooks/core
// to the mix
let useBox = createStyleHook('box', {
m: (value, theme, props) =>
css`
margin: ${value}rem;
`,
})
let useText = createStyleHook('text', {
size: (value, theme, props) =>
css`
font-size: ${value}rem;
`,
})
// Styled components composed with style hooks
// <DivAWithBoxAndText size='1' m='2'/>
let DivAWithBoxAndText = DivA.compose(
useText,
useBox
)
// Styled components with functions in template literals
// <DivB color='red'/>
let DivB = styled.div`
color: ${(theme, props) => theme.colors[props.color]};
`
// Another way to compose style hooks with styled components
let DivC = styled.div(`margin: 0;`, [useBox])
// Flexible inputs, you can use strings, objects,
// and functions with props/themes
let DivD = styled.div(`margin: 0;`)
let DivE = styled.div({margin: 0})
let DivF = styled.div((theme, props) => `margin: 0;`, [useBox])
let DivG = styled.div((theme, props) => ({margin: 0}))
// And you can always create additional components
// with extra style hooks
let DivH = DivG.compose(useBox)Installation
npm i @style-hooks/styled @style-hooks/core @emotion/core
yarn add @style-hooks/styled @style-hooks/core @emotion/core
Peer dependencies
@emotion/core@style-hooks/core
Playground
Check out
@style-hooks/styled on CodeSandbox
API Documentation
Complete documentation can be found here
LICENSE
MIT