React: Theming with Material UI. An introduction to customising your…
By: Ross Bulat
Tags: Front End Development, Typescript, React, JavaScript, Programming

React: Theming with Material UI

An introduction to customising your React apps with Material UI themes

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.

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.

Thinking about adopting Material UI?

If you’ve recently come across Material UI and are wondering whether its worth taking the time to familiarise yourself with the library and ultimately adopt it, there may well be major benefits for doing so. If you fall into the following categories, then Material UI will be very attractive for you:

If you have developed ad-hoc React apps that are time consuming to maintain, migrating to Material UI will take away a lot of that maintenance for you. If you have complex input types for example, or a verbose range of breakpoints to manage to get your responsive behaviour just right, or your theme is becoming more complex and harder to maintain, Material UI will abstract those problems and make them a lot easier to manage through their polished APIs and range of useful props provided for each component.

Material UI supports a range of CSS solutions including styled components out of the box, making it easy to migrate existing styles to the library. Although this aids in the migration process, it will become apparent that Material UI’s own styling solution built on top of JSS will be more intuitive and capable to use alongside the library.

If your project has gone from an individually managed project to a team based project and you are looking for conformity, Material UI will provide strict conventions that your team will likely already be familiar with, decreasing the learning curve and onboarding process of your project.

If you need to prototype new app designs and layouts, Material UIs grid system will more than suffice to play with a flexbox centric layout and responsive behaviour.

To get a feel of the component library at this stage, check out the Components documentation that starts with the Box component (that is essentially a wrapped <div> ). There are a range of code snippets for each of the components and live previews for the reader to play with.

You can even plug in own theme configuration into the documentation pages to see how it looks on the live docs. Visit this section to play with primary and secondary colour selections for a live preview courtesy of the docs. We’ll dive into theming much more in the next section.

Installation and Setup

It’s very simple to get started with Material UI, only requiring the core module to be installed into your project. Along with the core module, I also recommend installing Material UI’s icons package, that make it extremely simple to import and embed SVG icons in your components. Install the packages using yarn:

yarn add @material-ui/core @material-ui/icons

From here, importing Material UI components can be done either by destructuring syntax or by using the full import statement. Consider the following for importing the Grid component:

// ok import { Grid } from '@material-ui/core' // also ok import Grid from '@material-ui/core/Grid'

The former approach is more favoured, especially when it comes to importing a whole range of Material UI components for use:

Click the above components to visit their official documentation. Typography is a text wrapper that handles text variants, such as headers, paragraphs and captions.

Icons can also be imported and embedded with ease:

// embedding material ui icons import AccessAlarmIcon from '@material-ui/icons/AccessAlarm' const AlarmComponent = () =>

<AccessAlarmIcon />

Material UI host a comprehensive range of icons that come in a range of styles, ranging from outlined, filled, rounded, sharp and two-tone.

Although Material UI does offer an Icon component that is designed to handle SVGs and a range of external libraries including Font Awesome, for added ease of development material-ui/icons should be the developer’s first port of call. Check out the Icons Demo to get a feel of how the Icon component supports external libraries.

With this setup in mind, you can now import Material UI components and embed them within your app — but it is most likely that you do not want your React app to feel just like another Google website! This is where theming becomes important. Material UI is fully customisable — you can even disable the trademark ripple effect upon clicking buttons with a disableRipple prop.

The next section dives into the theming solution Material UI offers and walk through the setup process.

Along with the main Material UI components, the documentation also offers a Component API section that references every component used in the Material UI library, along with all props and supported values, starting with the Accordion component. It’s encouraged that the reader familiarise themselves with this section to fully grasp a component’s capabilities, as well as uncover other utility components that may be useful for particular use cases during development.