Repository: material-ui
Issue: Hydration error in next.js with MUI after upgrading Emotion
Labels: external dependency,package: system,nextjs

### Steps to reproduce

I am using a `<LoadingButton />` in my app. I can't reliably reproduce this. In most cases, it works fine. Sometimes it doesn't.

### Current behavior

Button uses default MUI styling and ignores all the theme overrides I have upon a hard refresh. When navigating to the page via next.js routing, it works fine. Then if I refresh, the styles use the default MUI stylings. In the console I get the following warning:
```
[Error] Warning: Prop `className` did not match. Server: "MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth css-sppx0e-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root" Client: "MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-disableElevation MuiButton-fullWidth css-e1igr2-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
button
MuiButtonBase-root
ButtonBase
MuiButton-root
Button
MuiLoadingButton-root
LoadingButton
div
Styled(div)
Box
form
div
Styled(div)
Box
section
MuiContainer-root
Container
div
Styled(div)
Box
ContentWrapper
ContactFormSection
ContactUs
Contact
div
Styled(div)
Box
div
Styled(div)
Box
HeaderStateContext
DefaultLayout
ConfirmationDialogProvider
Component@
QueryClientProvider
ReactQueryWrapper
Component@
SnackbarProvider
RtlProvider
ThemeProvider
ThemeProvider
ThemeProvider
ThemeProvider
SettingsProvider
div
MotionComponent
LazyMotion
MotionLazy
App
AppLayout
Provider
Integrow
PathnameContextProviderAdapter
PureComponent@
ReactDevOverlay
Component@
AppContainer
Root
"
See more info here: https://nextjs.org/docs/messages/react-hydration-error"
	(anonymous function) (hydration-error-info.js:63)
	(anonymous function) (setup-hydration-warning.js:18)
	printWarning (react-dom.development.js:86)
	error (react-dom.development.js:60)
	warnForPropDifference (react-dom.development.js:9571)
	diffHydratedProperties (react-dom.development.js:10414)
	prepareToHydrateHostInstance (react-dom.development.js:12564)
	completeWork (react-dom.development.js:22176)
	completeUnitOfWork (react-dom.development.js:26591)
	performUnitOfWork (react-dom.development.js:26563)
	workLoopSync (react-dom.development.js:26461)
	renderRootSync (react-dom.development.js:26429)
	performConcurrentWorkOnRoot (react-dom.development.js:25733:89)
	workLoop (scheduler.development.js:266)
	flushWork (scheduler.development.js:239)
	performWorkUntilDeadline (scheduler.development.js:533)
```

In the screenshot you can see the difference. The fonts/styles are using the default MUI styles:
<img width="438" alt="Screenshot 2024-07-23 at 4 42 36 PM" src="https://github.com/user-attachments/assets/6404f25b-860e-47dd-84b0-3611f90d84b0">
<img width="497" alt="Screenshot 2024-07-23 at 4 42 47 PM" src="https://github.com/user-attachments/assets/38d51e3e-c5b0-4f7a-a158-dc62177b91ae">

### Expected behavior

Button loads with correct styles always

### Context

_No response_

### Your environment

```
  System:
    OS: macOS 15.0
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: 9.5.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.183
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @mui/lab: 5.0.0-alpha.171 => 5.0.0-alpha.171 
    @mui/material: 5.16.4 => 5.16.4 
    @mui/material-nextjs: 5.16.4 => 5.16.4 
    @types/react: 18.3.3 => 18.3.3 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
```

Tried in safari and chrome

**Search keywords**: loadingbutton hydration