Dynamic styles in styled() components

[jmoore34]

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]

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]

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]

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.