why do we need to install gatsby-plugin-styled-components after installed styled-components

Question

I'm learning Gatsbyjs and saw an odd thing.

For example, if I want to use styled-components, I need to install: gatsby-plugin-styled-components AND styled-components

Whereas, I tried to only install styled-components and it works.

My question is:

Why do I need to install related Gatsbyjs plugin in this case?

Answer 1

The answer is that just using styled-components will result in styled-components being applied on client JavaScript runtime. So sometimes, when you load your Gatsby site, you will see the styles you've written with styled-components-components not immediately on your website but they will be applied after some delay which can result in some weird visual effect (elements jumping around, or changing in color / size / other properties).

gatsby-plugin-styled-components makes sure the styles will be delivered to the client right from the HTML.