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.
- Part 1 : Understand MUI theme structure & How to read doc
- Part 2 : Override global variables & Tools
- Part 3 : Override component variables (Release 29/10)
- Part 4 : Override with external library react-emotion (Release 5/11)
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.
- 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
For more detail about material design color system, read here
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.
Largest text on screen
EX. Header with display, script style
Subtitles (subtitle1, 2)
Smaller than headlines
EX. Card Header (San Serif)
Body (body 1,2)
Caption and Overline
Annotate imagery (caption)
Introduce headline (overline)
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