Comments (1)
I have the same behaviour, I have no idea what we are missing but clearly the css injection is not working on the server side.
You can clearly observe it by simply disabling javascript (client side), with the following code replacing <Component {...pageProps} />
:
<ThemeProvider theme={theme}>
<Button variant="contained">Test button</Button>
</ThemeProvider>
This buttons outputs:
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary mui-d00fc6-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">Test button</button>
But if you look for any of these class names in the head of your page (while JS is disabled) you'll notice that none is present.
On the other hand, if we enable JS, we will have the CSS injected, something like this:
<head>
<style data-emotion="mui" data-s="">.mui-f16x46-MuiButton-root{font-family:Nunito,sans-serif;}</style>
</head>
That means CSS is injected on the client side, which is why the SSR rendered page is not correct (which causes the flickering). I haven't found the solution to this yet. It's strange because the install steps are pretty simple so I'm not sure what I'm missing.
Maybe that's a version issue.
My environment
npx @mui/envinfo
System:
OS: macOS 13.6.1
Binaries:
Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
pnpm: 8.6.6 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 124.0.6367.78
Edge: Not Found
Safari: 17.1
npmPackages:
@emotion/react: ^11.9.3 => 11.9.3
@emotion/styled: ^11.9.3 => 11.9.3
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.15
@mui/icons-material: ^5.8.4 => 5.8.4
@mui/material: ^5.15.15 => 5.15.15
@mui/material-nextjs: ^5.15.11 => 5.15.11
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@types/react: ^18.0.9 => 18.0.15
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.6.4 => 4.7.4
from material-ui.
Related Issues (20)
- [material-ui] Not able to build the project when updating to Next.js 14.2.2 with v5.15.15 HOT 5
- [code-infra] Replace all references of event as e HOT 4
- [material-ui][theme] Array syntax doesn't work for values in styleOverrides in theme HOT 4
- MRT Infinite Scrolling with RTK Query HOT 1
- [docs-infra] Show plan on API pages
- [docs] need for a blog about how to optimize MUI
- [material-ui][Grid] Make the v2 component version stable
- [docs-infra] Using the right to left feature with browser translators HOT 5
- [joy-ui][Select] Floating label Select HOT 1
- [material-ui][AlertTitle] Missing Typography props when using AlertTitle
- [joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color HOT 1
- [material-ui] Slider component twitching near 100 and 50 marks and A700/A400 marks not visible when sliding
- [material-ui][TableRow] Exported variable 'StyledTableRow' has or is using name 'UNDEFINED_VOID_ONLY'
- Button and few more MUI components' css styling are off when use with Bootstrap 5.3.3
- [system] Unnecessary media query with 0px breakpoints HOT 1
- Memory utilization HOT 1
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- Compatibility with React 19 types
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.