Material-UI v4 releases with CSS specificity, Classes boilerplate, migration to Typescript and more

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

CSS specificity needs to be good enough and by default, Material-UI injects its style at the end of the <head> 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.

Classes boilerplate

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.

TypeScript

All the demos have been migrated from JavaScript to TypeScript. The team has even type checked their demos which improves their TypeScript test coverage. Also, they have fixed many issues during the migration. While writing an application with TypeScript, users can now directly copy & paste the demos without the need of converting them or having to fix the errors.

Improved UX

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.