[RFC] Remove @mui/material default theme and @mui/system, @pigment-css/react reexports

[oliviertassinari]

Pros

The motivation is similar to #40590: isolation of purposes. What if we were forcing developers to import from @mui/system, and @mui/material directly, no longer reexporting anything from @mui/material. This is a strategic move to:

1. Brand education. Better isolate the responsibilities, to educate developers that each of these 3 modules solves different problems. It forces people to use the right docs.

When you use Shadcn UI, Tailwind CSS is not reexported of it.

2. Performance marketing. better isolate the bundle size, removing the perception of bloat.

This would for instance better communicate the real cost of adding new Material UI components. When you look at https://bundlephobia.com/package/@mui/material@5.15.4 you see a huge bloat:

but the actual cost is much 90% lower, once you have all the shared dependencies. This can also look frightening from the IDE when using this popular VS Code extension: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

3. Customization This better supports the strategic direction of having @mui/material only about the CSS logic of the components (you can have it in npm or in your sources, your choice). For this to work, the source needs to be written in a way that everything exported from @mui/material can end-up in someone's codebase. For example, it would be insane to keep:

   material-ui/packages/mui-material/src/utils/isHostComponent.ts

   Line 6 in 029eb3b

   function isHostComponent(element: React.ElementType) {

   in this location.

4. Multi-theme support. These reexports made a big mess with Joy UI. We have a lot of duplication in the codebase, but it's wrong, we should have used MUI System properly to support multi-theme.

Neutral

CSS Variables support makes a theme provider required. For a long time not having the theme provider requirement was a differentiator of Material UI against https://github.com/react-toolbox/react-toolbox. React Toolbox was harder to configure, creating friction to adoption. Today, Tailwind CSS too doesn't have drop-in support for components, you have to configure it first.

[oliviertassinari]

Another value of forcing a default theme to be provided at the root of the page, is the simplification of the style. We would no longer need to provide a default value when CSS variables are used, it's better DX, less code to read in the CSS devtool.