[next-app-dir] Button variant="contained" Prop className did not match.

[mtr1990]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1.Using Button in next-app-dir
2.Console show error with variant="contained"

Current behavior 😯

1. With variant="contained"

import Button from '@mui/material/Button';

export const metadata = {
  title: 'Page',
};

export default function Page() {
  return (
    <Button color="primary" size="large" variant="contained">
      figma workspace
    </Button>
  );
}

2. With variant="outlined" (No error)

import Button from '@mui/material/Button';

export const metadata = {
  title: 'Page',
};

export default function Page() {
  return (
    <Button color="primary" size="large" variant="outlined">
      figma workspace
    </Button>
  );
}

3. With variant="text" (No error)

import Button from '@mui/material/Button';

export const metadata = {
  title: 'Page',
};

export default function Page() {
  return (
    <Button color="primary" size="large">
      figma workspace
    </Button>
  );
}

Expected behavior 🤔

No error displayed

Context 🔦

Test on Dark Mode.
In Light Mode everything works fine.

Your environment 🌎

No response

[shieldz80]

@mtr1990 Did you find a solution to this? This is still happening for me anytime I use dark theme (next js 13 with app dir). It even happens with the example app (https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) and as a result the component which causes the error does not have dark theme applied.

You can see in the screenshot that header is broken, that's where the error occurs.