Skip to content

[styled-engine-sc] Fix compatibility with Vite and Vitest#48558

Merged
mj12albert merged 1 commit into
mui:masterfrom
mj12albert:fix-styled-engine-sc-vitest
May 21, 2026
Merged

[styled-engine-sc] Fix compatibility with Vite and Vitest#48558
mj12albert merged 1 commit into
mui:masterfrom
mj12albert:fix-styled-engine-sc-vitest

Conversation

@mj12albert

@mj12albert mj12albert commented May 20, 2026

Copy link
Copy Markdown
Member

Preview: https://stackblitz.com/edit/6m4j77c8-fh3enqae?file=src%2FDemo.test.tsx

  • Ctrl+C to kill the app in the Stackblitz terminal, then run npm run test and see the test passes.

Without the fix (v9 repro) a scStyled is not a function error will be thrown

Fixes #46586

@mj12albert mj12albert added type: bug It doesn't behave as expected. package: styled-engine-sc Specific to styled-components v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels May 20, 2026
@code-infra-dashboard

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48558--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 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


Check out the code infra dashboard for more information about this PR.

@mj12albert mj12albert marked this pull request as ready for review May 20, 2026 22:29
@siriwatknp

Copy link
Copy Markdown
Member

Is this fix specific for styled-components version?

@mj12albert

Copy link
Copy Markdown
Member Author

Is this fix specific for styled-components version?

It's for styled-components v6 so this fix will be good for Material UI v9 + v7

@mj12albert mj12albert changed the title [styled-engine-sc] Fix styled components import [styled-engine-sc] Fix compatibility with Vite and Vitest May 21, 2026
@mj12albert mj12albert merged commit c7a36bf into mui:master May 21, 2026
22 checks passed
@mj12albert mj12albert deleted the fix-styled-engine-sc-vitest branch May 21, 2026 11:27
@github-actions

Copy link
Copy Markdown

Cherry-pick PRs will be created targeting branches: v7.x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. package: styled-engine-sc Specific to styled-components type: bug It doesn't behave as expected. v7.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Material UI with styled-components and Vite/Vitest is not working since v7

2 participants