Last week, the team behind Material-UI released Material-UI v4 with CSS specificity, migration to Typescript and much more. The release of Material-UI v4 is influenced by two major factors. Firstly, the team analyzed the Developer survey results done in March. Secondly, the team wanted to be up to date with the latest best practices in the React community and with the Material Design Specification.
What’s new in Material-UI v4?
CSS specificity needs to be good enough and by default, Material-UI injects its style at the end of the element. But styled components and few other popular styling solutions inject the style just before it and therefore loses specificity. In order to solve this problem, the team has introduced a new prop: injectFirst.
In v1, the team had introduced classes API to target all the elements but they observed the use of this API for sometime and saw few users struggling. It is challenging to apply the class name on the right element and it further requires boilerplate as well. In order to improve this situation, the team changed the class name generation to output global class names and kept the classes API working as before.
The team has changed the menu organization to group all the components under a single navigation item. The team has also changed the background color to white for increasing the text contrast and readability.
Tree shaking with ES modules
This is the first version that supports native tree shaking with ES modules, users can now use destructured imports while importing multiple components.
To know more about this release, check out the post on Medium.