React build of MUI + styled-components breaks styles of MUI #5596
Description
Steps to reproduce
Steps:
- Open this link to live example: https://github.com/vladyakubets/mui-styled-components-build-issue
- install deps
yarn install - run the project
yarn local - Button on localhost:3000 looks fine
- run
yarn build:local+serve -s build - Button styles will be broken (it looks like after build MUI styles like
line-height: 1.75becomesline-height: 1.75px)
Current behavior
Half of the default MUI styles are broken after the build
When using MUI + styled-components
Works fine in DEV mode
Expected behavior
after building a React project it should work in the same way as DEV one.
Context
fix issue with building a React Project that have MUI and styled-components as deps.
Your environment
npx @mui/envinfo
System:
OS: macOS 15.5
Binaries:
Node: 23.3.0 - ~/.nvm/versions/node/v23.3.0/bin/node
npm: 10.9.0 - /usr/local/bin/npm
pnpm: Not Found
Browsers:
Chrome: 138.0.7204.169
Edge: Not Found
Safari: 18.5
npmPackages:
@mui/core-downloads-tracker: 7.2.0
@mui/icons-material: ^7.2.0 => 7.2.0
@mui/material: ^7.2.0 => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine-sc: ^7.2.0 => 7.2.0
@mui/system: 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@mui/x-data-grid: ^7.23.5 => 7.29.8
@mui/x-date-pickers: ^7.23.0 => 7.29.4
@mui/x-internals: 7.29.0
@types/react: ^18.3.12 => 18.3.23
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: ^6.1.19 => 6.1.19
typescript: ~5.6.2 => 5.6.3
Search keywords: styled-components, React, VITE, MUI, Build