Add support for @mui/material@6 on every X component

[MikeLautensack]

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

Expected behavior

clean install

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: packages not compatible

Search keywords:

[LukasTy]

Hello @MikeLautensack
The next tag MUI X libraries are out of date, we are currently releasing stable v7 versions, which are the most recent ones.
The peerDependency on @mui/material on those packages is listed as follows:

mui-x/packages/x-charts/package.json

Line 54 in 630acb5

"@mui/material": "^5.15.14",

Feel free to try using the latest next release of @mui/material at your own risk, but we do not have plans to support it until our next major version (v8).

Do you have any more questions? 🤔

[MikeLautensack]

Hello @MikeLautensack The next tag MUI X libraries are out of date, we are currently releasing stable v7 versions, which are the most recent ones. The peerDependency on @mui/material on those packages is listed as follows:

mui-x/packages/x-charts/package.json

Line 54 in 630acb5

"@mui/material": "^5.15.14",

Feel free to try using the latest next release of @mui/material at your own risk, but we do not have plans to support it until our next major version (v8).

Do you have any more questions? 🤔

I tried with and without the @next flag and got the same result. I need to use the mui v6 packages because of the SSR flicker fix for next.js app router. Will v6 be compatible with the mui-x packages when v6 is out of beta?

[Studio384]

In mui/material-ui#30660 it was said that v7 will support Material UI v6 once it is released? When can we expect MUI X v8 to be released so we can migrate?

[LukasTy]

I tried with and without the @next flag and got the same result.

Yes, that makes sense. None of the v7 versions support the @mui/material pre-releases. 😉
I just mentioned that @next is older than @latest for @mui/x packages at the moment. 👍

I need to use the mui v6 packages because of the SSR flicker fix for next.js app router.

Do you mean this guide?
Are you having problems using it on v5 of @mui/material? 🤔

Will v6 be compatible with the mui-x packages when v6 is out of beta?

There is no such plan. We only plan to support it in the next major of @mui/x packages (v8).

[LukasTy]

In mui/material-ui#30660 it was said that v7 will support Material UI v6 once it is released? When can we expect MUI X v8 to be released so we can migrate?

Are you referring to this comment: mui/material-ui#30660 (comment)? 🤔
I wasn't aware of it.
In short—we will try to see if supporting the new @mui/material major is feasible without issues, but I'm unsure if we can guarantee it. 🙈 🤷
cc @mui/x

[MikeLautensack]

I tried with and without the @next flag and got the same result.

Yes, that makes sense. None of the v7 versions support the @mui/material pre-releases. 😉 I just mentioned that @next is older than @latest for @mui/x packages at the moment. 👍

I need to use the mui v6 packages because of the SSR flicker fix for next.js app router.

Do you mean this guide? Are you having problems using it on v5 of @mui/material? 🤔

Will v6 be compatible with the mui-x packages when v6 is out of beta?

There is no such plan. We only plan to support it in the next major of @mui/x packages (v8).

Thats a pages router example. I am using the app router and the only available for the app router is in the pre release v6 versions. I spent a whole weekend trying to figure it out with the app router specifically but could only do it with v6.

[Studio384]

In mui/material-ui#30660 it was said that v7 will support Material UI v6 once it is released? When can we expect MUI X v8 to be released so we can migrate?

Are you referring to this comment: mui/material-ui#30660 (comment)? 🤔 I wasn't aware of it. In short—we will try to see if supporting the new @mui/material major is feasible without issues, but I'm unsure if we can guarantee it. 🙈 🤷 cc @mui/x

Yes, I was referring to that comment.

If it won't be supported until v8, when can we expect that release? The entire point of splitting op MUI v6 in v6 and v7 was to not have to do a painful migration, but this feels like we'll have to do it anyways if v8 is coming only near the end of the year.

[cherniavskii]

Hi @MikeLautensack
I think you can solve the peer dependency error with NPM overrides:
Adding this to your package.json should do the trick:

"overrides": {
  "@mui/x-data-grid": {
    "@mui/material": "$@mui/material"
  }
}

With this change, npm i @mui/x-data-grid should work.
Can you give it a try?

[LukasTy]

Yes, I was referring to that comment.

If it won't be supported until v8, when can we expect that release? The entire point of splitting op MUI v6 in v6 and v7 was to not have to do a painful migration, but this feels like we'll have to do it anyways if v8 is coming only near the end of the year.

@Studio384 I have confirmed with the team that the plan is to aim at supporting @mui/material@v6 ASAP if there are no breaking changes that would stop us from doing it. 👌
One specific thing that worries me is the particular change regarding the flickerering.

Otherwise, the v8 stable of @mui/x-* libraries is estimated end of Q1 2025, the start of v8 prereleases—Q4 2024.

[Studio384]

Yes, I was referring to that comment.
If it won't be supported until v8, when can we expect that release? The entire point of splitting op MUI v6 in v6 and v7 was to not have to do a painful migration, but this feels like we'll have to do it anyways if v8 is coming only near the end of the year.

@Studio384 I have confirmed with the team that the plan is to aim at supporting @mui/material@v6 ASAP if there are no breaking changes that would stop us from doing it. 👌 One specific thing that worries me is the particular change regarding the flickerering.

Otherwise, the v8 stable of @mui/x-* libraries is estimated end of Q1 2025, the start of v8 prereleases—Q4 2024.

Is there an issue or PR where we can follow to know whether or not it's going to be an issue?

Otherwise, MUI X v8 is then set to release after MUI v7, I assume MUI v7 will be supported by MUI X v8?

This really feels like it should have been synchronized much better... It's disappointing that a first party package doesn't support the latest version of the 1 package it is supposed to be used with.

[LukasTy]

Is there an issue or PR where we can follow to know whether or not it's going to be an issue?

There is no separate issue for this yet.
Let's keep this one open and we'll post an update on this regard once we know if it's going to be an issue or not. 😉

[MikeLautensack]

Yes, I was referring to that comment.
If it won't be supported until v8, when can we expect that release? The entire point of splitting op MUI v6 in v6 and v7 was to not have to do a painful migration, but this feels like we'll have to do it anyways if v8 is coming only near the end of the year.

@Studio384 I have confirmed with the team that the plan is to aim at supporting @mui/material@v6 ASAP if there are no breaking changes that would stop us from doing it. 👌 One specific thing that worries me is the particular change regarding the flickerering.

Otherwise, the v8 stable of @mui/x-* libraries is estimated end of Q1 2025, the start of v8 prereleases—Q4 2024.

Yes I agree. One thing that might be of note is that since I updated to v6.0.0-beta.4 the backgroundColor property in the sx prop on the Box component is not working any longer when I was working before in the earlier v6 versions.

[siriwatknp]

Yes I agree. One thing that might be of note is that since I updated to v6.0.0-beta.4 the backgroundColor property in the sx prop on the Box component is not working any longer when I was working before in the earlier v6 versions.

Can you share a reproducible sandbox? I have take a look on it.

[cherniavskii]

since I updated to v6.0.0-beta.4 the backgroundColor property in the sx prop on the Box component is not working any longer

It seems to be working: https://stackblitz.com/edit/react-vbhvn1?file=Demo.tsx

[MikeLautensack]

Yes I agree. One thing that might be of note is that since I updated to v6.0.0-beta.4 the backgroundColor property in the sx prop on the Box component is not working any longer when I was working before in the earlier v6 versions.

Can you share a reproducible sandbox? I have take a look on it.

Sorry, I was wrong it is working however what I though was the backgroundColor prop not working is some other bug related to theming.

In my next.js app I have a paper comp in my root layout that has a bg-color of "surface" and I have a header and sidebar with bg-color "surfaceContainer". In light mode the colors are applied correctly but in dark mode the header and sidebar are painted with the "surface" color. I have verified that the styles in chrome dev tools match my theme.ts so I am very confused.

[MikeLautensack]

Hi @MikeLautensack I think you can solve the peer dependency error with NPM overrides: Adding this to your package.json should do the trick:

"overrides": {
  "@mui/x-data-grid": {
    "@mui/material": "$@mui/material"
  }
}

With this change, npm i @mui/x-data-grid should work. Can you give it a try?

Thank you! I just got the time to try this and it worked! Much appreciated!

[abriginets]

It makes sense to apply this fix when you're staying on SSR. Using @mui/x charts or datepickers without pigment-css on the contrary makes zero sense since you would still need emotion SSRed which will most likely opt you out of static rendering in NextJS. At the very least you would bring emotion to the client increasing bundle size while negating all the benefits from pigment.

Can't wait to see how drastically my bundle size would reduce thanks to pigment-css and static rendering though

[siriwatknp]

I tried with and without the @next flag and got the same result. I need to use the mui v6 packages because of the SSR flicker fix for next.js app router. Will v6 be compatible with the mui-x packages when v6 is out of beta?

Can you share what's blocking you in v5?

[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.

@MikeLautensack: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.