mui / mui/material-ui

[styled-engine-sc] React build of MUI + styled-components breaks styles of MUI

Open
#46,615 3 comments 0 reactions 1 assignee View on GitHub

@brijeshb42 is already working on this.

Since Jul 29, 2025.

external dependency integration: vite package: styled-engine-sc scope: system
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce

Steps:

  1. Open this link to live example: https://github.com/vladyakubets/mui-styled-components-build-issue
  2. install deps yarn install
  3. run the project yarn local
  4. Button on localhost:3000 looks fine
Image
  1. run yarn build:local + serve -s build
  2. Button styles will be broken (it looks like after build MUI styles like line-height: 1.75 becomes line-height: 1.75px)
Image
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.