Repository: next.js
Issue: Material UI warning with Next 14 on InputAdornment component
Labels: bug

### Link to the code that reproduces this issue

https://github.com/ken-spencer/next-bug-report

### To Reproduce

Launch next.js in version 14 with "npm run dev" and look at the console. Run again with version 13 and the error goes away.  I'm wondering if something has changed under the hood how files are rendered. The className differences appear to be tirggered by properties that <InputAdornment/> auto detects from it's parent component. Perhaps something has change don the server side that might interfere with this detection? 

### Current vs. Expected behavior

Currently the console is filled with a notice. Expected would be for there to be no notice. 

auto [ThemeProvider.js:26:8](webpack://_N_E/src/app/Form/ThemeProvider.js?fdde)
auto [localhost:3000:1:2677](http://localhost:3000/?required=dafaf%40fdafa.com&email=dafafafaf%40dfafa.com&password=&confirm_password=&select=)
Warning: Prop `className` did not match. Server: "MuiInputAdornment-root MuiInputAdornment-positionEnd css-1laqsz7-MuiInputAdornment-root" Client: "MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
div
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
InputAdornment@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/InputAdornment/InputAdornment.js:88:82
div
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
InputBase@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/InputBase/InputBase.js:246:83
OutlinedInput@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/OutlinedInput/OutlinedInput.js:140:82
div
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
FormControl@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/FormControl/FormControl.js:101:82
withEmotionCache/<@webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66
TextField@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/TextField/TextField.js:98:83
form
ThemeProvider@webpack-internal:///(app-pages-browser)/./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:44:7
ThemeProvider@webpack-internal:///(app-pages-browser)/./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:57:7
ThemeProvider@webpack-internal:///(app-pages-browser)/./node_modules/@mui/material/styles/ThemeProvider.js:27:9
ThemeProvider@webpack-internal:///(app-pages-browser)/./src/app/Form/ThemeProvider.js:25:40
div
main
InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:18
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
LoadingBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:76
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67
InnerScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9
ScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:37
RenderFromTemplateContext@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44
OuterLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:220
body
html
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:297:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:158:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:100:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:130:67
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:441:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:127:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:143:24 [app-index.js:31:21](webpack://_N_E/node_modules/next/dist/client/app-index.js?d705)
Ignoring unsupported entryTypes: largest-contentful-paint. [page.js line 2326 > eval:348:29](http://localhost:3000/_next/static/chunks/app/page.js%20line%202326%20%3E%20eval)
auto [ThemeProvider.js:26:8](webpack://_N_E/src/app/Form/ThemeProvider.js?fdde)
auto [localhost:3000:1:2677](http://localhost:3000/?required=dafaf%40fdafa.com&email=dafafafaf%40dfafa.com&password=&confirm_password=&select=)
[Fast Refresh] rebuilding [hot-reloader-client.js:176:24](webpack://_N_E/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js?068b)
[Fast Refresh] rebuilding [hot-reloader-client.js:176:24](webpack://_N_E/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js?068b)
Source map error: Error: request failed with status 404
Resource URL: 
Source Map URL: react_devtools_backend_compact.js.map

​

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Just used default create next app.
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Additional context

_No response_