DEV Community

Discussion on: Using CSS Variables to Tame Styled Component Props

Collapse
 
yaireo profile image
Yair Even Or • Edited

This approach still creates duplicate CSS for every prop change...with duplicate variables.. this saves nothing.

A better approach would be to use style attribute to do the variables change:
dev.to/terrierscript/tips-css-vari...

Here's a screenshot that shows this folly:

monosnap.com/file/JE19V30V2mfkuCci...

Every time you are using props in Styled-Components you are creating another a complete clone of all the defined styles plus the change. Tons of duplicate code for nothing, this is the opposite what the logic to use CSS variables instead of props!