Fix MUI v7 styled-components Vite/Vitest compatibility issue #46586

[DipakHalkude]

• I have followed (at least) the PR section of the contributing guide.

[DipakHalkude]

Builder with MCP

Based on the work completed, here's the PR title and description:

PR Title

Fix MUI v7 styled-components Vite/Vitest compatibility issue #46586

PR Description

Summary

This PR fixes the MUI v7 compatibility issue with styled-components and Vite/Vitest (#46586) by updating the import statement in @mui/styled-engine-sc from a default import to a named import.

Changes Made 1. Fixed Import Issue in @mui/styled-engine-sc

• File : packages/mui-styled-engine-sc/src/index.js
• Change : Updated import from import scStyled from 'styled-components' to import { styled as scStyled } from 'styled-components'
• Reason : styled-components v6+ uses named exports instead of default exports, causing compatibility issues with Vite/Vitest 2. Updated Documentation
• File : docs/data/material/integrations/styled-components/styled-components.md
• Added : Comprehensive Vite/Vitest configuration section with two solution options:
  • Option 1: Using fallbackCJS: true in vite.config.ts
  • Option 2: Using inline dependencies in vite.config.ts
  • Package.json configuration override for styled-engine 3. Created Comprehensive Tests
• File : packages/mui-styled-engine-sc/src/vite-vitest.test.js
• Added : Complete test suite to verify Vite/Vitest compatibility including:
  • Basic styled component functionality
  • Complex styled components with theme support
  • Options handling (shouldForwardProp, label)
  • ThemeContext, keyframes, and css exports 4. Added Test Configuration Files
• File : packages/mui-styled-engine-sc/vite.config.test.js
• File : packages/mui-styled-engine-sc/package.test.json

Problem Solved

The issue was that styled-components v6+ changed from default exports to named exports, but @mui/styled-engine-sc was still using the old default import syntax. This caused failures in Vite/Vitest environments where the ESM/CJS interop was stricter.

[mui-bot]

Netlify deploy preview

• docs/data/material/integrations/styled-components/styled-components.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 1a6a851