Tips: CSS Variables for styled-components

terrierscript profile image terrierscript ・1 min read

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};`)



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

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

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


Editor guide
kinston profile image

Is it possible to use CSS variables in React-Native? If not, is there a similar way to store variables in React-Native with Styled-Component?

dance2die profile image
Sung M. Kim

Would using CSS variable prevent styled components (SC) generating classes per each CSS variable value?

e.g.) SC would generate 100 classes for 100 colors with props.

terrierscript profile image
terrierscript Author

Maybe yes, component not generate classes but <Vars> components class is generated.
I'm not that right solution but it's maybe solve attrs.