More than 3 years have passed since last update.

【Next.js】Material-UI導入時に[Warning: Prop `className` did not match. ]が発生した場合の対処法

Posted at 2021-06-14

はじめに

Next.jsにMaterial-UIを導入した際、以下のエラーが出るようになったので、原因を調べてみた。

react-dom.development.js:67 Warning: Prop `className` did not match. Server: "MuiTypography-root makeStyles-title-7 MuiTypography-h6" Client: "MuiTypography-root makeStyles-title-3 MuiTypography-h6"
    at h6
    at Typography (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:32031:28)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:39745:31)
    at div
    at Toolbar (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:31078:23)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:39745:31)
    at header
    at Paper (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:20042:23)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:39745:31)
    at AppBar (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:1547:23)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:39745:31)
    at div
    at ButtonAppBar (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1623629454944:41740:17)
    at main
    at div
    at Root
    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1623629454944:29:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1623629454944:158:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1623629454944:274:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1623629454944:8135:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1623629454944:8623:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1623629454944:8759:25)

結論

サーバー側でレンダリングされたCSSの名前と、クライアント側のCSSの名前がマッチしないため、当該エラーが発生している模様。

私の場合、pages/_document.jsを追加することで、問題が解消した。

環境

{
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "next": "10.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
}

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up