Repository: material-ui
Issue: Material UI v6 + Remix + Vite running with “Prop `className` did not match” error
Labels: bug 🐛,package: icons,package: material-ui

### Steps to reproduce

Execute the following repository,

- https://github.com/onozaty/remix-prisma/tree/mui-v6

Steps:
1. Open with DevContainer
2. `npm run dev`
3. Open http://127.0.0.1:5173/ in your browser

### Current behavior

The following will appear in your browser's console

```
chunk-NUMECXU6.js?v=cbdf64e9:521 Warning: Prop `className` did not match. Server: "MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-5iifl-MuiPaper-root-MuiAppBar-root" Client: "MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-nt0iva-MuiPaper-root-MuiAppBar-root"
    at header
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Paper2 (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:1478:17)
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at AppBar2 (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:4366:17)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Box3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3025:19)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Container3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:4495:19)
    at App
    at body
    at html
    at Layout (http://127.0.0.1:5173/app/root.tsx:9:3)
    at RenderedRoute (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4279:5)
    at RenderErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4239:5)
    at DataRoutes (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:5270:5)
    at Router (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4624:15)
    at RouterProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:5085:5)
    at RemixErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:7146:5)
    at RemixBrowser (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:8692:46)
    at DefaultPropsProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3404:3)
    at RtlProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3380:3)
    at ThemeProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3336:5)
    at ThemeProvider2 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3487:5)
    at ThemeProviderNoVars (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:858:10)
    at ThemeProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:940:3)
    at MuiProvider (http://127.0.0.1:5173/app/mui.provider.tsx:12:3)
```

![Image](https://github.com/user-attachments/assets/05d60027-73f8-44a7-b305-ae55b42e60bd)

### Expected behavior

Expect no errors in the browser console.

### Context

This did not occur with Material UI v5.
The code for v5 is as follows.

- https://github.com/onozaty/remix-prisma/tree/mui-v5

When I upgraded from Material UI v5 to v6, I initially got the following error with `npm run dev`.

```
3:39:56 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@mui/icons-material"
|- /workspaces/remix-prisma/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53536:15)
    at async ssrImport (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53392:16)
    at async eval (/workspaces/remix-prisma/app/routes/customers+/index.tsx:5:31)
    at async instantiateModule (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53451:5)
```

To avoid this, the following settings are added in `vite.config.ts`.

```ts
  ssr: {
    noExternal: [/^@mui\//],
  },
```

Now the screen itself can be displayed, but there is an error in the browser console.

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.15.1 - /usr/local/bin/node
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.1.2 
    @mui/icons-material: ^6.1.2 => 6.1.2 
    @mui/material: ^6.1.2 => 6.1.2 
    @mui/private-theming:  6.1.2 
    @mui/styled-engine:  6.1.2 
    @mui/system:  6.1.2 
    @mui/types:  7.2.17 
    @mui/utils:  6.1.2 
    @types/react: ^18.2.20 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.1.6 => 5.5.3 
```
</details>


**Search keywords**: Remix Vite