Tips: CSS Variables for styled-components

In styled-components, custom property can use with props

const Item = styled.div`
  color: ${({color}) => color};
  background: ${({bgCbolor = "red"}) => bgColor};
`

but this syntax is redundant.

Solution: use CSS Variables

In modern browser, we can use CSS Variable. It’s very useful.

I found more useful that convert react props to CSS Variables.

export const Vars = styled.div`
  ${(props) => {
    return Object.entries(props)
      .filter(([_, v]) => typeof v === "string" || typeof v === "number")
      .map(([k, v]) => `--${k}: ${v};`)
      // You can convert to kebabCase if need.
      // .map(([k, v]) => `--${_.kebabCase(k)}: ${v};`)

  }}
`

Usage


const Item = styled.div`
  color: var(—-color);
  background: var(—-bgColor, "blue");
`

const FooComponent = () => (
  <Vars color="red" bgColor="yellow">
    <Item />
  </Vars>
)

Additionally, Be careful that variable effect to all component children. This behavior has pros and cons.

Blog

Tips: CSS Variables for styled-components

terrierscript

Solution: use CSS Variables

Join Our Newsletter. No Spam, Only the good stuff.

Related