CODEWITHSUNDEEP
reactjsmaterial-uinext.jsstyled-components
the8thbit
the8thbit

Reputation: 681

material-ui styles with next.js

I'm having trouble getting material-ui styles to work correctly with next.js. When I change a style and then save while running the dev server the styles get applied, but if I reload the page, save any other change, or restart the server the default material-ui styles overwrite my custom styles. Also, whenever I use the Box material-ui component I see this error in the console:

react-dom.development.js:67 Warning: Prop `className` did not match. Server: "MuiBox-root MuiBox-root-3 makeStyles-boxStyles-1" Client: "MuiBox-root MuiBox-root-4 makeStyles-boxStyles-1"

Here is my _document.tsx: https://pastebin.com/wJD9jyZQ

Here is my _app.tsx: https://pastebin.com/s8Ys01kb

Here is my index.tsx: https://pastebin.com/t5Z9QGpP

Here is index.styles.ts (where my custom styles are): https://pastebin.com/qe7M5ysq

Upvotes: 1

Views: 1783

Answers (1)

Tim Santeford
Tim Santeford

Reputation: 28121

In the _document.js file you need to enhance the App with the ServerStyleSheets object.

For Material UI v4 you need to import:

import { ServerStyleSheets } from '@material-ui/core/styles';

For Material UI v5 you need to import:

import { ServerStyleSheets } from '@material-ui/styles';

Then later down in the file:

const sheets = new ServerStyleSheets();

...

enhanceApp: (App: any) => (props) => sheets.collect(<App ... />),

See this v4 example

The above worked for me with v5 even though the v5 example did not include ServerStyleSheets

Upvotes: 2

Related Questions