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.
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
