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.
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.
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.
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.
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.
Implementing autocompletion in React Material UI application [Tutorial]
Applying styles to Material-UI components in React [Tutorial]
Fyne 1.0 released as cross-platform GUI in Go based on Material Design
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…