search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
91.86k stars 31.57k forks source link

[examples] Create nextjs example using styled-components #27088

Closed hboylan closed 2 years ago

hboylan commented 2 years ago

Fixes #27087

mui-pr-bot commented 2 years ago

No bundle size changes (experimental)

Generated by :no_entry_sign: dangerJS against 6ae845be3483f51cb6cc1203ee9f1686c9922668

hboylan commented 2 years ago

Just updated _document.tsx to match the official next with-styled-components example, but still no luck. I'm not sure if MUI requires something to be done on the server in addition to the styled-components logic.

mnajdova commented 2 years ago

Just updated _document.tsx to match the official next with-styled-components example, but still no luck. I'm not sure if MUI requires something to be done on the server in addition to the styled-components logic.

There shouldn't be anything else required, the create-react-app-with-styled-components-typescript doesn't need anything else. I tried adding webpack5: false in next.config.js, but that didn't help either. On our docs, we use the babel.config.js for configuring the alias.

On an unrelated note, I would maybe update the README.md to:

index ac99c62162..d2230dae29 100644
--- a/examples/nextjs-with-styled-components-typescript/README.md
+++ b/examples/nextjs-with-styled-components-typescript/README.md
@@ -22,7 +22,7 @@ or:

 ## The idea behind the example

-The project uses [Next.js](https://github.com/zeit/next.js), which is a framework for server-rendered React apps. It includes `@material-ui/core` and its peer dependencies, including `emotion`, the default style engine in Material-UI v5. If you prefer, you can [use styled-components instead](https://next.material-ui.com/guides/interoperability/#styled-components).
+The project uses [Next.js](https://github.com/zeit/next.js), which is a framework for server-rendered React apps. It includes `@material-ui/core` and its peer dependencies, including `styled-components`, which is used instead of the default style engine in Material-UI v5.

 ## The link component
hboylan commented 2 years ago

@mnajdova I made the recommended change to the README.

The CRA example you referenced is entirely client-side rendered, but NextJS relies on server-side rendering. This makes me think the ServerStyleSheets referenced in the v4 docs will be required. https://material-ui.com/guides/server-rendering/#handling-the-request

hboylan commented 2 years ago

This fixes the original error Error: Cannot find module '@emotion/styled'.

Now, the example renders when the app initially starts. It has proper styling, but warns:

Warning: Expected server HTML to contain a matching <div> in <div>.

Then, if the app reloads for any reason, the styles are missing with the slightly different warning:

Warning: Did not expect server HTML to contain a <style> in <div>.

🤔

mnajdova commented 2 years ago

This fixes the original error Error: Cannot find module '@emotion/styled'.

If I need to guess, it would be the changes in .babelrc that fixed the issue.

Now, the example renders when the app initially starts. It has proper styling, but warns:

Warning: Expected server HTML to contain a matching

in
. Then, if the app reloads for any reason, the styles are missing with the slightly different warning:

Warning: Did not expect server HTML to contain a