Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MUI with next/image got React Hydration Error

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

I’m started with https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript and use next/image

import Image from 'next/image';

export default function Logo() {
  return <Image src="/logo.png" alt="logo" width={130} height={65} />;
}

then got “Warning: Prop style did not match” in console.

Expected behavior 🤔

Get rid console error.

Steps to reproduce 🕹

Steps:

Get start with https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript
Create Logo component
Add to page

Context 🔦

Having error in console.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.62
    @mui/icons-material: ^5.2.5 => 5.2.5
    @mui/material: ^5.2.6 => 5.2.6
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.6
    @mui/system:  5.2.6
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react: 17.0.38 => 17.0.38
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: 4.5.4 => 4.5.4