search

astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

Dynamic styles in styled() components #730

Open jmoore34 opened 2 years ago

jmoore34 commented 2 years ago

Hi. This is more of a question. I wasn't quite able to tell from the docs; is it possible to do something like the following:

const Text = styled("span")<{color: string}>`
   color: ${props => props.color};
`

Thanks

dpashkevich commented 2 years ago

Don't believe that's possible. The main way astroturf is different from the Styled Components library is that it has zero runtime, which means all the styles are generated at the build step and not dynamically injected in the DOM during the execution.

jquense commented 2 years ago

yeah it's not possible right now. It could actually be possible, if we compile the values to css custom properties (like with the css props) but honestly i'm not inclined to make the styled API more robust, i tend to think that it's an inferior API compared to defining your own components with a css prop.

dpashkevich commented 2 years ago

Good callout @jquense, you can get dynamic styles natively if you use CSS Custom properties, e.g.

const Text = styled("span")`
   color: var(--color-text);
`

That's one appropriate way to do theming in your app, for instance.