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

2 min read

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.


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.

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.

Read Next

Implementing autocompletion in a React Material UI application [Tutorial]

Applying styles to Material-UI components in React [Tutorial]

Fyne 1.0 released as a cross-platform GUI in Go based on Material Design