How to Customize Material-ui theme v3.2.0 (Part 1)

In this serie, I will give you deep understanding about material-ui because it is necessary for customizing theme. This serie contains 4 parts.

For whom who don’t know what material-ui is.

React components that implement Google’s Material Design.

Let me tell you a short history about Material-ui before we dig deep into it (You can skip this section). The project started a couple years ago, the first version is 0.x.x. I was amazed when I first saw the components demo. I remembered the button has bouncing effect when clicked still wow me until these days. However, the first version implement in inline-style which is hard when it comes to customization and overrides. There is no grid component in v0.x.x, so it was hard for newbie like me to get started. Fortunately, in version 1+ (current v3.2.0) they implement css-in-js style with a lot of new useful components including Grid, Breakpoints, Hidden and more. Another thing that I love this project is their thorough roadmap and their consistency. Theming is easier but still hard for beginner, that’s why I want to share my experience in this serie. Document is highly organized and clearly explained with demos but I think semantic-ui-react do this part better because of instant editor, MUI have to open in code-sandbox to edit. By the way, I love MUI and I recommend that all of you should try it.


Understand Material-ui Theme Structure

When it comes to theme, the first area you want to explore is color. Because MUI implement Google’s Material Design, it is very important that you have to understand the intention of it. Otherwise you will mess it up in the end.

Color System

  • Primary color : display most in your app
  • Secondary color (optional) : accent ui to distinguish from others
  • Surface, Background and Error color

Color has dark and light variant defined in number from 50–900

color variant example

For more detail about material design color system, read here

Typography

Believe me, text is the next area you need to catch up. I was once use material-ui without understanding the design system behind it, as a result, a mess. My project contains a lot of font sizes and weights. It was time-consuming to refactor code and slow the development process.

Headlines (h1-h6)

Largest text on screen

Short, important

EX. Header with display, script style

Subtitles (subtitle1, 2)

Smaller than headlines

Medium-emphasis text

Short

EX. Card Header (San Serif)

Body (body 1,2)

Long-form writing

Caption and Overline

Smallest

Annotate imagery (caption)

Introduce headline (overline)

Button

Call to Action

All CAPITAL LETTER San serif

Can be Sentence Case

For more detail about material design typography, read here

That’s it, now let’s go to material-ui document & guide. Official site

This section is for beginner who want to try material-ui. If you are not, you can skip to the next part.

If you want to customize material-ui them, you should be familiar with mui components. I recommend you should take a look at “Component Demos” (Button, Checkbox, Progress, TextField, Tabs).

You can play with it in code sand box to get used to before we go to the next part.

That’s it. If you are ready to build some theme, click below.

Part 2 : Override global variables & Tools