Steps to reproduce
Link to live example: (required)
Steps:
- Update Chrome to version 129.
- Run a React project using Joy UI (with default styling setup).
- Observe that certain styles are either not applied or incorrectly rendered.
Current behavior
MUI components are either missing styles or the styles are not applied as expected.
Expected behavior
MUI components should render with the expected styling as they did in previous versions of Chrome.
Context
After updating Chrome to version 129, I noticed that MUI’s CSS styles are not being applied correctly. Specifically, components that were rendering and styling properly before the Chrome update are now missing or have incorrect styles applied. This issue only seems to appear in Chrome 129, as other browsers (e.g., Firefox, Safari) and older versions of Chrome continue to render the styles correctly.
Your environment
npx @mui/envinfo
Browser: Chrome Version 129.0.xxxx
{
"name": "digital_platform",
"version": "0.1.0",
"private": true,
"browserslist": [
"> 0.5%",
"not dead",
"ios >= 10",
"chrome >= 49",
"not ie <= 11"
],
"scripts": {
"dev:pm2": "pm2 kill && yarn build:dev && pm2 start ./ecosystem.config.js --env development",
"dev": "env-cmd -f .env.development next dev --port 443 --hostname local-test.com --experimental-https",
"build": "env-cmd -f .env.production next build",
"start": "next start --port 3100",
"lint": "next lint",
"format": "prettier --write ./src",
"test": "jest"
},
"dependencies": {
"@mui/joy": "5.0.0-beta.32",
"next": "14.2.3",
"react": "^18",
"typescript": "^5.3.2"
},
"devDependencies": {
"@storybook/addon-essentials": "^8.1.3",
"eslint": "^8.55.0",
"jest": "^29.7.0",
"typescript": "^5.3.2"
}
}Search keywords: Chrome 129, CSS cache, Emotion styles, Joy UI