How do you use styled-components with the new app.js ( no _document.tsx) system?
Answered
Daggertooth pike conger posted this in #help-forum
Daggertooth pike congerOP
The canary examples of using styled componets use the pages folder, not the app system. As far as I can tell, the _document.tsx doesn't work in the latest / app folder version of next.js; so how do we get the styled components config to work with the app/page.tsx / layout.tsx system?(FWIW I'm trying to get evergreen.ui not to flash - as I understand it the flash is because of the styled compnents
Answered by Rafael Almeida
you need to read the styles from
ServerStyleSheet and inject them into the document using useServerInsertedHTML. the docs have an example: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components3 Replies
you need to read the styles from
ServerStyleSheet and inject them into the document using useServerInsertedHTML. the docs have an example: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-componentsAnswer
Asian black bear
@Daggertooth pike conger Not strictly the most helpful answer, but
css-in-js libraries like styled-components not working well is a known shortcoming of the /app dir. At the very least it seems to take some tinkering, but realistically it isn't quite ready yet imo.Daggertooth pike congerOP
@Rafael Almeida Thanks - that makes sense.