Skip to content

[docs] Add Vite/Vitest configuration for styled-components #47042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[docs] Add Vite/Vitest configuration for styled-components #47042

wants to merge 4 commits into from
+60 −0

Conversation

@rpgjarman
Copy link

@rpgjarman rpgjarman commented Oct 7, 2025 •
edited
Loading

Fixes #46586

Summary

Added documentation for Vite/Vitest configuration when using styled-components with MUI v7+, addressing ESM/CJS compatibility issues.

Changes

  • Added new "Configuration with Vite and Vitest" section
  • Documented two approaches: fallbackCJS (simpler) and inline dependencies (faster)
  • Included performance notes and best practices based on community feedback in the issue thread

Related Issues

@rpgjarman
Copy link
Author

rpgjarman commented Oct 7, 2025

I've submitted a PR to add the Vite/Vitest configuration to the styled-components documentation.

The documentation now includes both the fallbackCJS and inline dependency options discussed in this thread, with notes on performance differences.

@mui-bot
Copy link

mui-bot commented Oct 7, 2025 •
edited
Loading

Netlify deploy preview

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 3c52387

@zannager zannager added docs Improvements or additions to the documentation. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI integration: vite labels Oct 7, 2025
@zannager zannager requested a review from siriwatknp October 7, 2025 13:57
@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Nov 5, 2025
Closed
1 task
ZeeshanTamboli
ZeeshanTamboli reviewed Nov 5, 2025
View reviewed changes
docs/data/material/integrations/styled-components/styled-components.md
The `inline` option provides better performance and is the recommended approach for most projects.

:::info
You must also override `styled-engine` in your `package.json` when working with Vite + Vitest, otherwise Vitest will resolve `@mui/styled-engine` instead of `@mui/styled-engine-sc`. See the [installation instructions](#installation) above for details.
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli Nov 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The redirect link (#installation) does not work.

@maynkxx maynkxx mentioned this pull request Nov 6, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli left review comments

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

docs Improvements or additions to the documentation. integration: vite scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

4 participants

@rpgjarman @mui-bot @ZeeshanTamboli @zannager