Brings advanced styling and customization features, new components and more.
MUI (formerly Material-UI) has released the latest version of its popular[1] React component library – MUI Core v5.
Fifteen months in the making[2], v5 features a new style system, better customization, new components, and a host of visible and not so visible enhancements to improve both user experience (UX) and developer experience (DX).
Styling & customization
MUI has adopted emotion as its default style system, allowing fast dynamic styling and eliminating the overhead of bundling a second style system when using emotion or styled components in the app. This change has also enabled the simple yet sophisticated customization of components via the global theme, which allows the creation of new component colors and variants (collections of component styles). These are then selectable with the respective React props, with no changes needed to the underlying component.
Every component now also sports an sx prop, which can be used to directly style the component with either CSS or utility shortcuts while taking advantage of design tokens from the global theme.
Finally, the components now always come with global CSS class names, which can simplify the customization of complex components.
New components
The new components include an improved layout Grid, a Stack component for handling simple layouts, as well as components that have been maturing in the lab for some time: Autocomplete, Pagination, Rating, Skeleton, Speed Dial, and Toggle Buttons.
To ease migration from v4, MUI has developed a comprehensive codemod to automate the upgrade of users’ code and provides a step-by-step migration guide.
Developers have spoken
In an email, Anthony Bouch of web consultancy infonomic said:
“The combination of emotion and the sx prop is brilliant. I’m also super impressed with the effort that went into making everything backward compatible. We can take our time and convert components to either ‘styled’ or ‘sx’ whenever suits.
“I love the new components styleOverrides and defaultProps in custom themes. It’s a much easier and more logical way to customize theme components. I’m in awe of the amount of work MUI have put into this.”
Meanwhile, on Twitter, user Anson LowZF didn’t hold back: “sx props is a game changer for
@MaterialUI v5. No need to scroll up and down to check my makeStyles' CSS. 👍”
A word from the boss
When asked for comment, MUI CEO Olivier Tassinari said: “We’re extremely proud of what we’ve accomplished with MUI Core v5. Both the team and community have worked incredibly hard to deliver this groundbreaking release. And we’re not stopping here!”
Despite all this, the MUI Core components remain completely free to use, being published under the MIT license.
Details of these and many other changes and improvements are covered in a comprehensive blog post.
[1] Over 70K GitHub Stars, and over 2.2M downloads per week from npmjs.com.
[2] ...with over 5,800 commits from over 600 contributors and over 40 canary releases.