Styled-Components in astro | Astro Lounge | Page 1

shell viper Apr 13, 2023, 1:00 PM

#

Is it possible to use styled-components in React components imported by astro now?
I can see them rendered properly in development but on build I get the styled.button is not a function error

deft plinth Apr 13, 2023, 1:24 PM

#

In general, we advise against using styled-components — there’s a detailed issue tracking CSS-in-JS support here: https://github.com/withastro/astro/issues/4432

GitHub

Supporting CSS-in-JS · Issue #4432 · withastro/astro

It's not super clear which CSS-in-JS libraries work, so I'm creating this issue as sort of a place to start the conversation and document the current status. Here's a few popular librar...

#

Here are the notes on styled-components from that issue:

Prod build errors with: styled.div is not a function.
Can be worked around with client:only or by using buildSsrCjsExternalHeuristics and ssr.noExternal (will cause FOUC).

shell viper Apr 14, 2023, 5:25 AM

#

Many thanks

#Styled-Components in astro