What are the two CSS-in-JS examples doing?

[binarybehemoth]

With reference to the two examples (styled-jsx & styled-components) at the official tutorial here, what is the purpose of wrapping everything in a Style Registry? Can't we simply apply the styles to the individual client components or the {children} in the Root Layout?

(I am currently working on a tutorial on Web Coding Center here.)

[icyJoseph]

Roughly speaking, you want to collect the style sheets of the React tree, on the server, in the styled-components example, IIRC, it is a list of React elements, to make sure these are available in the first HTML payload.

The rendering of your tree happens first. The StyleSheetManager populates the sheet, and then within useServerInsertedHTML, the styles are collected, and added to the head of the HTML payload.

Then in the client, you'd avoid flashes of un-styled content, because the CSS rules were already added to the head of the document. This was the same thing we did with _document, we used the collectStyled methods, we now use the StyleSheetManager.

From the styled-components docs:

The collectStyles method wraps your element in a provider. Optionally you can use the StyleSheetManager provider directly, instead of this method. Just make sure not to use it on the client-side.

And then sincetypeof window !== 'undefined' is true in the client, when the component renders client side, we don't use the StyleSheetManager anymore.

[binarybehemoth]

I am not sure if I understood you. Are you saying the style registries can help prevent flashes of the web layout during the initial loading of the client components?

[icyJoseph]

Try the site with JS disabled. Because you used the styled registry and such, there'll be styles present. No runtime was needed to evaluate what styles ought to be applied.

Now build without the registry and such, and visit the site with JS disabled, your page is now un-styled. Enable JS, and it looks styled again, but now it depends on how fast the styles can be calculated client side.

[rishabhtpt]

Hey there! Looking to style up your web pages? A CSS tutorial is a fantastic way to learn how! Think of it as a friendly guide walking you through making your website look awesome with colors, fonts, and layouts. Diving into a good tutorial is key to understanding how to bring your design ideas to life and make your site truly pop. It's like getting personalized tips and tricks to become a web styling wizard!