React: Theming with Material UI

An introduction to customising your React apps with Material UI themes

Ross Bulat
12 min readSep 14, 2020

Material UI: The winning React UX library in 2020

Material UI is currently the most popular UI framework for React, with the library providing 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 is 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.

--

--

Ross Bulat

Programmer and Author. @ Parity Technologies, JKRB Investments