[discussion] Preparing v6

[oliviertassinari]

Edited by @DiegoAndai: Moved accepted ideas/issues into either the v6 milestone, the v7 milestone, or this list of brainstorm ideas

This is an umbrella issue that centralizes and lists all the potential improvements that we can consider in MUI Core v6. The potential improvements being listed here require breaking changes. We do not intend to ship v6 in 2022. We plan, as much as possible, to release the next major features in minor versions without breaking changes.

Big features

• Static CSS extraction [system] Support new style engine that generates static CSS files at build time #34826 / [RFC] Zero-runtime CSS-in-JS implementation #38137 A new style engine, an alternative to emotion and styled components, with no runtime (extract the CSS at build time). Many of the fastest growing frontend libraries in 2022 were focusing on performance. Considering the feedback in our survey and the trend in the space where better performance = better UX, we have a great opportunity by pushing in this direction. Now that we can use CSS variables, and that we have the styled API, we should be able to pull this off without a major breaking change. Another reason why https://www.robinwieruch.de/web-development-trends/#utility-first-css.
• React Server components Add React Server Component support for Layout components (Grid, Stack, Container) #35993. For the same reason as above, this can improve performance. Deno, who is heavily biased in the claim raise a few reason why the need for server side rendering trend will continue to grow https://deno.com/blog/the-future-and-past-is-server-side-rendering.

Other changes

For a detailed list of changes, please visit the Material UI: v6 milestone. If you're looking for a particular change, you can also search issues filtering by that milestone.

Promotions

• https://github.com/github/release-radar

[MitchTalmadge]

What change does this fall under?

material-ui/packages/mui-material/src/Tooltip/Tooltip.js

Line 232 in 97427f0

// TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.

I'm curious for the reason behind removing PopperProps

Edit: It looks like it was added in f98d52b so I believe the reason must be that componentsProps will consume both PopperProps and TransitionProps.

[jeromeSH26]

Hi everyone, not sure this is the best place to post my request, but it seems to me that V6 of MUI should also bring some "standardization" in a way to manipulate the styles. Let me give you an example. Do not hesitate to move my comment elsewhere

I spent a couple of hours to find how to style the "a.active" in the theme (I'm using the Link of MUI and NavLink of react-router for your reference)

I came up with this solution for the "MuiLink" component in the createTheme:

     styleOverrides: {
        root: () => {
          return {
            borderColor: themePalette.SECONDARY_COLOR,
            "&:hover": { //<--- :hover is also working. the & is not mandatory
              borderColor: themePalette.SECONDARY_COLOR,
              color: "white",
            },
            "&.active": { // <--- .active is not working... Need the & 
              background: themePalette.THIRD_COLOR,
              color: themePalette.SECONDARY_COLOR,
              fontWeight: "bold",
            },
          };
        },
      },

That might be obvious for you BUT here is the trick:
for hover, the & at the beginning of "&:hover" can be omitted, ":hover" is also applying the style correctly.
however for the .active, the & is mandatory, ".active" doesn't apply the style, whereas "&.active" works as expected

I'm not very familiar with pure CSS, maybe in a CSS file this is also working this way, but for TS or JS, a standardization might be really powerful.

Anyway, your library is so great. Thks for your job and happy new year.

[o-alexandrov]

It would be great to know your thoughts and to know whether you consider:

1. to attempt to make MUI framework agnostic or at least a layer that would be agnostic

   • Idk and don't have a clear proposal on how to achieve this
   • maybe, the way Material Web currently builds with lit (and lit having generators to create react/vue/etc. components) could prompt to similar approaches
     • at best, there would be no performance degradation between the current react components and generated ones

2. use of CSS Modules w/ variables for the styles, instead of emotion (and/or other CSS-in-JS). This point could be a plan B for the point 1 or initial work in this direction

   • it might increase complexity, but could potentially bring more users (or make some existing users more satisfied, like this one)
   • it would not only make use of MUI more flexible, but would noticeably decrease the negative effect of MUI on LCP (from Google's Lighthouse) affecting issues like #32103
   • it'd be interesting to know why this your comment wasn't pursued

[oliviertassinari]

It would be great to know your thoughts and to know whether you consider:

@o-alexandrov I have added a new section for big feature ideas for v6.

1. Considering https://twitter.com/olivtassinari/status/1619858999943516160, if we ever do this, I think that it will be by wrapping the React components into a light runtime, e.g. Preact. (I don't think that it would make sense to use web components inside or even expose them, I think that web component was invented to solve a problem that existed 10 years ago but doesn't really exist anymore).
2. It's part of the list :)

[o-alexandrov]

How about simplifying MUI's codebase on how you do animation by adopting framer-motion, Transitions in particular?

• Chakra UI uses framer-motion for Collapse component for example
• Material Design 3 would need effort on the changed/new animation. Using framer-motion should simplify the task
• MUI has animation-related performance issues that would be resolved [SwipeableDrawer] Very bad v5 performance on iPhone #31009
• framer-motion is also very popular, so for those who use it, you'd decrease the bundle size if you make a switch in your codebase
  • for those who don't, it'd be great if there was interoperability between animation libraries similar to how you did with styled API

[chrisweb]

@o-alexandrov I saw few days ago that the Chakra UI team noted in their 3.0 roadmap that they want to remove the framer motion dependency:

Remove dependency on framer-motion: We'll redesign the components to fit any motion library or native css animation.

their roadmap post is here: chakra-ui/chakra-ui#7180

so maybe doing that would actually be the best solution, allow framer motion or any other motion library to replace (mui) motion, similar to how it is done for date libraries and probably similar to the idea of removing the dependency on emotion to allow other css-in-js libraries as alternatives (see style engine discussion #34826 that emerged after the nextjs / server components discussion started: #34896)

[KasimAhmic]

With regard to static CSS extraction, would/could this cover use cases where theme configs are loaded dynamically at runtime?

For example, I have an app that has a different color scheme based on the customer that it's deployed for and the theme config is fetched on page load and applied to the app. Would it be possible to fetch the theme configs at build time? Or maybe export the theme config variables as global CSS variables that can then be overridden at runtime?

[JoseVSeb]

Is the compatibility of pigment-css with MUI-X planned for the initial release of v6?

[oliviertassinari]

Is the compatibility of pigment-css with MUI-X planned for the initial release of v6?

@JoseVSeb This isn't really in our target. MUI X has about 20% of the use relative to Material UI. It's also almost has much work as in Material UI to support. So it makes more sense for us to first prove that the model works with Material UI before expending.

• Pigment CSS and Emotion by design must be able to cohabite in the same page to allow progressive migrations, so it's incremental value as more components are migrated.
• We have two official release slots in the year to ship breaking changes that syncs all projects together (Pigment CSS, Base UI, Material UI, MUI X), September and March: https://mui-org.notion.site/React-releases-7490ef9581b4447ebdbf86b13164272d. If Material UI gets shipped out of shedule, it means that it should be designed in a way makes it possible for downstream, e.g. MUI X to not release a breaking change while supporting the latest version of Material UI. So here too, you should be able to see incremental value.

[Studio384]

Will it be possible to use Material UI v6 in combination with MUI X at all (with or without MUI being on Pigment while MUI X still uses emotion) when it launches? From looking at the MUI X repository there doesn't seem to be any effort right now to support MUI v6. MUI X is currently a blocking issue for testing out the v6 release. We used to follow along with alphas and betas in a test branch to not have all breaking changes come in at once, but that hasn't been possible with v6 in combination with MUI X.

[oliviertassinari]

But that hasn't been possible with Material UI v6 in combination with MUI X

@Studio384 What issue did you face?

Will it be possible to use Material UI v6 in combination with MUI X when it launches?

I don't know. The interdependency rules we have between projects https://mui-org.notion.site/Introduction-5933bc8bccf544c7aca78d0033ded787 won't really answer your question. We say "Upstream (Material UI) and Downstream (MUI X) are responsible for Downstream adoption of upstream" and "In the short-term, Downstream (MUI X) decides when they adopt the upstream changes (Material UI) but it can't take more than one major cycle".

[Studio384]

@Studio384 What issue did you face?

MUI X v7 currently requires MUI v5 and only v5. So from what I get here, you're saying it might take until MUI v7 before MUI X supports MUI v6?

[endaquigley]

Is MUI v6 with Pigment CSS compatible with Remix?

It's not listed as a supported framework even though Remix is just a Vite plugin these days:
https://next.mui.com/material-ui/migration/migrating-to-pigment-css

I can only seem to get Pigment CSS working when SSR is disabled:
https://stackblitz.com/edit/remix-run-remix-aroqz5

[DanailH]

Hi, @Studio384 I'm confirming that MUI X v7 will support Material UI v6 once there is a stable release.

[gaetansnl]

hello @oliviertassinari , just tried the beta and followed the upgrade guide on a new nextjs project. Seems pigment is working but all material ui components are still using emotion. I also built material-ui repo and looked at the demo app, it works and mui uses pigment. So I'm probably missing something. Is there a way to completely remove emotion and prevent it from being loaded unintentionally?

[JoseVSeb]

Seems pigment is working but all material ui components are still using emotion.

I have been facing this as well. pigment works fine. but it's not being used for mui components. they still rely on emotion at runtime. an example would be nice.

[rossipedia]

This is what I had to do to get things working with @mui/material and Pigment and vite:

• remove ThemeProvider or CssVarsProvider
• add @mui/material to transformLibraries in the vite plugin config:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    pigment({
      theme: extendTheme(...),
      transformLibraries: ['@mui/material'],
    }),
    react(),
  ],
});

After that the MUI components would start picking up the Theme customizations using Pigment.

Sorry, I don't use NextJS so I don't know what the same approach there would look like.

[JoseVSeb]

transformLibraries: ['@mui/material'],

That's what I was missing. Thanks.

[DiegoAndai]

Thanks, @gaetansnl, @rossipedia, and @JoseVSeb, for pointing out this issue; this was indeed missing in the guide. We're adding it: #43217

[xml]

Thanks all for this amazing project. Possible I'm doing something wrong, but when I add that transformLibraries config to a new project, with Vite 5.4 and MUI beta 5, the server drowns in hundreds of errors, such as:

[vite] Pre-transform error: /node_modules/@mui/material/StepConnector/StepConnector.js: Cannot read properties of undefined (reading 'palette')

I removed the ThemeProvider first. I have not customized a theme, so that's not present.

If any additional information would be helpful, I'm happy to provide.

[sdriffill-tm]

I'm having issues using MUI v6 Beta w/ Pigment CSS in a Remix project. I'm getting error:

[vite] Error when evaluating SSR module /app/root.tsx: failed to import "@mui/material"
|- /home/projects/github-ctaqne-71kwv1/node_modules/@mui/material/index.js:9
import * as colors from './colors';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I've taken a popular template kiliman/remix-vite-mui and followed all steps in the migration path to replace emotion with pigment, including using the updated instructions for the next beta release

Here's my upgraded version of the template - hopefully something I've just done wrong, and if so any pointers on how to fix would be greatly appreciated!

[endaquigley]

I'm having issues using MUI v6 Beta w/ Pigment CSS in a Remix project. I'm getting error:

[vite] Error when evaluating SSR module /app/root.tsx: failed to import "@mui/material"
|- /home/projects/github-ctaqne-71kwv1/node_modules/@mui/material/index.js:9
import * as colors from './colors';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I've taken a popular template kiliman/remix-vite-mui and followed all steps in the migration path to replace emotion with pigment, including using the updated instructions for the next beta release

Here's my upgraded version of the template - hopefully something I've just done wrong, and if so any pointers on how to fix would be greatly appreciated!

Same error with my Remix app. I wasn't sure if it was a Remix or Vite issue at the time.

[rossipedia]

@sdriffill-tm @endaquigley I dunno if you can call this a full fledged "starter", but here's a Remix repo I set up where I got MUI6 and Pigment working:

https://github.com/rossipedia/remix-mui-6

Maybe it can help get y'all unstuck 👍

[endaquigley]

@rossipedia thanks for your help. I noticed that your components aren't rendering as expected either:

---

I'm guessing that's related to this comment #30660 (comment)

[DiegoAndai]

Hey @xml, @sdriffill-tm, and @endaquigley! Thanks for the reports. May I ask you to create separate issues for these? This way, it will be easier to track, debug, and respond to 😊

[rossipedia]

@endaquigley wow you're right. it was working perfectly with beta 2 🤔. It also works as expected in Production, it's just npm run dev that's not working right. Hmmm....

[DiegoAndai]

Material UI v6 is stable! 🚀

Thanks, everyone, for contributing to the discussion. Hopefully, you can try the new major and provide feedback. If you have any issues or suggestions, please create separate issues to track those 😊.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.