Skip to content
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.

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

[poc] Support a version of Material UI without CSS in JS #44407

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

mnajdova
Copy link
Member

@mnajdova mnajdova commented Nov 14, 2024

This PR serves as a proof of concept of how we can build Material UI components using CSS modules, and then allow CSS in JS users to use all of the previously available APIs, like sx prop, styleOverrides etc. On the other hand, for people that care about performance or want to use plain CSS, they don't have to pay any penalty of bundle size or performance that comes from using CSS in JS.

CodeSandbox using Emotion: https://codesandbox.io/p/devbox/vite-react-forked-47ffsv (using the default @mui/styled-engine package)

CodeSandbox using only CSS modules: https://codesandbox.io/p/devbox/ssvrx2 (using the CSS modules only supported package @mui/styled-engine-noop - check vite.config.js)

@mnajdova mnajdova added the proof of concept Studying and/or experimenting with a to be validated approach label Nov 14, 2024
@mui-bot
Copy link

mui-bot commented Nov 14, 2024

Netlify deploy preview

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

Bundle size report

Bundle size will be reported once CircleCI build #767890 finishes.

Generated by 🚫 dangerJS against 9102b08

@mnajdova mnajdova changed the title [poc] Styled engine swapping methodology [poc] Support a version of Material UI without CSS in JS Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
proof of concept Studying and/or experimenting with a to be validated approach
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants