Material-ui: [Question] Material UI (next) + Nextjs + Styled components

[nmpatzios]

I have looked into the examples for nextjs+material ui (next) and nextjs + styled components but I am not sure if that require additional work.

Any suggestion?
Many thanks!

[oliviertassinari]

@nmpatzios This question is a duplicate of #8032. The exact same question has already been asked. Better keep the answers in a single location.

[nmpatzios]

I'm facing an issue when trying to reload a page after I have changed a material ui next component using a styled component. Based on the solution above (#8032) after reloading/refreshing the browser the material ui next component goes back to it's original css.

p.s.
This issue only occurs in dev not in production

The browser console error message after refresh/reload the page

Warning: Prop `className` did not match. Server: "MuiButtonBase-root-47 MuiButton-root-86 sc-VigVT iwjLMD" Client: "MuiButtonBase-root-47 MuiButton-root-86 sc-bwzfXH cHkGGL"

more details:

step 1:
clone the repo from the examples (examples/nextjs)

step:2
import styled components as shown
https://material-ui-next.com/guides/interoperability/#styled-components
e.x.:
import Button from 'material-ui/Button'; const StyledButton = styled(Button)` && { background: red; border: 1px solid red; font-size: 2rem; font-weight: bold; } `;

When I build the project everything works fine the css applied correctly.

But when i try to reload/refresh or clean cache from browser the button goes back to it's original state (the style css)

Any suggestions?

[nmpatzios]

Thanks guys for all your help!!!

I found a solution by adding .babelrc to project.
installing

"babel-plugin-styled-components": "^1.5.1",

and adding the following code to babel file

{
    "presets": [
        "next/babel"
      ],
    "plugins": [
        ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
    ]
}