loading...

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

  }}
`

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.

Discussion

pic
Editor guide
Collapse
kinston profile image
Kinston

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?

Collapse
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.

Collapse
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.
styled-components.com/docs/basics#...