MUI CSS Not Applying Correctly After Chrome 129 Update

[dauhn-kim]

Steps to reproduce

Link to live example: (required)

Steps:
1.Update Chrome to version 129.
2. Run a React project using MUI (with default styling setup).
3. 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": "jtbc_news_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-news.jtbc.co.kr --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: MUI joy, Chrome 129, CSS cache, Emotion styles, Joy UI

[danielwong2268]

I'm seeing the same issue and noticed this in the console [Deprecation] Custom state pseudo classes have been changed from ":--range-thumb-size" to ":state(range-thumb-size)". See more here: https://github.com/w3c/csswg-drafts/issues/4805