Upgrading to MUI v6 (Pros/Cons)

[masoudmanson]

MUI v6 is out! This thread is dedicated to evaluating the pros and cons of upgrading to MUI v6 and establishing a timeline for the transition.

Why upgrade to MUI v6? [Pros]

• React Server Component support

  MUI v6 introduces Pigment CSS, a new CSS-in-JS solution that replaces Emotion. With Pigment CSS, styles are extracted at build time rather than runtime, reducing client-side recalculations and enabling compatibility with React Server Components (RSC).

• React 19 Support

• ThemeProvider now supports all of the CssVarsProvider features

• support for container queries

• a new theme utility for adding styles to specific color modes

Breaking changes and Cons

• Upgrading to PigmentCSS

• Removed support for IE 11

• Minimum TypeScript version

  The minimum supported version of TypeScript has been increased from v3.5 to 4.7.

• UMD bundle removed

  To align with React 19's removal of UMD builds, Material UI has also removed its UMD bundle.

• Certain SDS components will need refactoring due to breaking changes in MUI v6, including:

  • Accordion • Autocomplete • DropdownMenu • Dropdown • ComplexFilter • Chip • Tag • FilterTag • ListItem • Theme file (due to the new color mode theme utility)

Additional Resources:

• https://mui.com/material-ui/migration/upgrade-to-v6/

[masoudmanson]

Feature Request: #834

[richaagarwal]

@masoudmanson Thanks for compiling these pros/cons! Would there be any reason not to upgrade to MUI v7 instead?

[masoudmanson]

@masoudmanson Thanks for compiling these pros/cons! Would there be any reason not to upgrade to MUI v7 instead?

You’re welcome! From what I understand, Material UI (MUI) v7 is still in its draft phase and hasn’t reached a stable release yet.

Additionally, MUI X v7, which includes a set of more complex UI components built on top of MUI, hasn’t been implemented in SDS yet.