Material UI: The winning React UX library in 2020

Material UI is currently the most popular UI framework for React, with the library provides a range of ready-to-use components out of the box. The library consists of components for layout, navigation, input, feedback and more. Material UI is based on Material Design, a design language that Google fore-fronted originally but is now widely adopted throughout the front-end developer community.

Material Design was originally announced in 2014 and built upon the previous card-based design of  Google Now. Material Design a battle tested design language that comes with support for modern front-end development standards such as responsiveness, theming, mobile-first, and built to be very customisable.

Material UI takes what Material Design has evolved into and provides a library of React components that can be used to build React UX from the ground up. To get a feel of what is possible with Material UI, there are a range of premium themes on the  Material UI store that cater for common use cases like admin panels and landing page designs.

This piece acts as an introduction to Material UI for those interested in adopting it in their React projects, and will be heavily focused on theming and the customisability of themes within Material UI.

Theming is the main bottleneck when getting started using the library for the newcomer, but there are a few good tools online to kick start your theming configuration that will be covered further down. The Material UI documentation also has a  dedicated section on theming that describes the theming process in depth. This piece however acts as a more tailored approach that will talk through the major concepts along with snippets to quickly set up a theming and styling solution.

#javascript #front-end-development #typescript #react