Style Hooks

Styled components

Supercharge your styled components with style hook composition and themes

Using @style-hooks/styled means better composition and less typing at a fraction of the bundle cost of @emotion/styled.

npm i @style-hooks/styled @style-hooks/core @emotion/core
import React from 'react'
import {css} from '@emotion/core'
import {createStyleHook} from '@style-hooks/core'
import styled from '@style-hooks/styled'
const useBox = createStyleHook('box', {
width: value => css`width: ${value}px;`
const List = styled.ul`
background-color: skyblue;
border-radius: 1rem;
<List width='200'/>
// <ul/>
// width: 200px;
// background-color: skyblue;
// border-radius: 1rem;
const ListItem =
color: white;
list-style: circle;
<ListItem width='100'/>
// <li/>
// width: 100px;
// color: white;
// list-style: circle;

Use them with style hooks

The coolest thing about @style-hooks/styled components is that you can compose them with your style hooks. This allows your styled components to inherit the style props defined in your hooks!

Use them without style hooks

You don't lose any emotion or styled-components features by selecting @style-hooks/styled

Style components based upon props and theme

With @style-hooks/styled you can change the way your styled component renders based upon props and themes

Change the component type with an as prop

You're not inextricably tied to the component type you select in styled.[component] - it's just a default. The below component renders a span.

Styling your own components

You don't have to use HTML primitives to use @style-hooks/styled, you can use your own components, too

Nesting styles

You can use selectors to style nested elements the same way you can with styled-components and emotion

Flexibly style with template literals, strings, objects, and functions

With @style-hooks/styled you're not tied to any one pattern. There are numerous ways to generate your component styles.

Continue to Server-side rendering
NPM icon
MIT License ©2019
Jared Lunde