Next.js: [Issue ] Using Material UI (next) + Styled compoenet with NextJS

[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?

[timneutkens]

Try upgrading to next@canary.

[nmpatzios]

Thnaks guys for all your help!!!

I found a solution by added .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 } ]
    ]
}

[RobbinHabermehl]

Unfortunately, apparently this isn't working in all cases; the issue persists when using material-ui v1.0.0-beta.43 and next v5.1.0 and so far I haven't found a solution. Could you please re-open this issue @timneutkens?

[kutsyk]

Hello guys the same errors with "material-ui": "^1.0.0-beta.44" and "next": "^6.0.0" tried a lot of configuration with .babelrc. Unfortunatelly nothing helps. Could you, please, reopen this task to fix the problem?

[timneutkens]

Can you please create a new issue that follows the issue template 👍

[roland-reed]

Any updates? I came across the same issue with [email protected] and @material-ui/[email protected]. Add .babelrc didn't solve the issue.

[williamluke4]

Any updates on this or does anyone have an example that I can look at? All the ones I have found are not working

[Neo478]

Same here, we can't continue with NextJs because of this issue.

[williamluke4]

@Neo478 Try this out nextjs-materialui-styledcomponents

[Neo478]

@williamluke4 Thanks! It solved half the issue. My elements still inherits from MuiCircularProgress after reloading the page, but they aren't spinning all around anymore!

[williamluke4]

@Neo478 Try this

const StyledButton = styled.div`
  && {
    width:  150px;
    padding: 10px;
    margin: 10px auto;
    text-align: center;
    color: white;
    background-color: blue;
  }
`;

[Neo478]

I tried to put

&& {

}

Around the elements's styles that are failing to render correctly, but it doesn't change anything.

[scottdevito]

Thanks @williamluke4 . I implemented what you have in that repo almost exactly (not using TS) but I'm getting a styling flicker on refresh (unstyled buttons are visible and then re-render as Material UI styling) and can't seem to pin down why.

[msreekm]

same here, flashing styles

[simonsmadsen]

Any fix to avoid the flashing styles?

[timneutkens]

Nearly all cases I've seen people report styled-components FOUC is when they forgot to add the babel plugin mentioned here: https://github.com/zeit/next.js/issues/3983#issuecomment-372255907

The material-ui example is hosted and maintained on the material-ui repository

Maybe you forgot to implement something 🤔

[sunlee-newyork]

I followed @williamluke4 's thread and landed on https://github.com/mui-org/material-ui/tree/master/examples/nextjs - I followed this example to the T and it worked

[caprica-Six]

Thanks @sunlee-newyork - worked like a charm after restarting the server.
I did forget to add the import flash ... & the .babel import...