Material UI Theming

Let's Test it out!

Getting started

First things first, use create-react-app to create a new project.

Next, let's use Material UI. In their 'Getting Started' section on their website, they give you the code to install it in your React project.

npm install @material-ui/core

The next thing they require is the Roboto font and—if you want to use the <Icon> component—Material icons which can be included in the head of your html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Now let's render some stuff. Create a new component called Header.js and copy this block of code into it.

import AppBar from '@material-ui/core/AppBar';
import Button from '@material-ui/core/Button';
import React, { Component } from 'react';

class Header extends Component {
  render() {
    return (
      <AppBar position="static">
        <div>
          <Button>
            <div>Button 1</div>
          </Button>
          <Button>
            <div>Button 2</div>
          </Button>
        </div>
      </AppBar>
    );
  }
}

export default Header

Now replace the App component in your index.js with your fancy new Header component et VOILA! You should have a header with two buttons. Very exciting.

The buttons have a lovely ripple effect and they are blue. Why? Because that is Material UI's default theme. You can see the full details of the default styles.

Enter the Theme

The first thing that needs to be done is to add a theme.js file in your src folder. In this file, the first thing we want to do is import some things. The first thing we want to import is the theme!

import { createMuiTheme } from '@material-ui/core/styles';

We're going to import the createMuiTheme, then export it again with the values we want.

Let's change the color of our AppBar. We're going to import a couple of color values from @material-ui/core/colors and put them into the palette section.

import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';

export default createMuiTheme({
  palette: {
    primary: pink,
    secondary: indigo
  }
});

So, we've customised our theme, now what?

• First, we have to import the theme provider MuiThemeProvider.

• Next, we'll have to import the our theme file.

• Finally, we'll have to encapsulate our app inside the provider and pass our theme in as a prop.

Rather than apply our theme to a modular component like a header, let's clear out our App.js and import our MuiThemeProvider and Header in there.

Your App.js should now look like this:

import React from 'react';
import Header from './Header';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import theme from './theme';

App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Header />
    </MuiThemeProvider>
  );
}

export default App

And if you look at your page, your AppBar is now pink!

The next step

This is super rad, but what if you want to customise all instances of a particular component, like a button or icon?

To do this, we'll need to head back to our theme.js file and add another section to our theme object.

You will need to provide the name and class of the component you want to customize. If you're not sure what this is, you can find it in the Material UI API documentation in the CSS section. You should be able to see all the customisable options. (Here is the documentation for the Button component)

Let's override some button style shall we?

In your theme section, below the palette object, add an overrides object. Within your overrides object, add the name of the component to be overridden (in our case MuiButton) and open an object. In your MuiButton object, give it a root object. This will be where we play around with the CSS properties. We'll give the root object two values: 1. color: white, will change the color of the button text to be white 2. '&:hover': { backgroundColor: 'purple' } will apply background-color: 'purple' styling when a cursor hovers over it.

Your theme.js should now look like this:

import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';

export default createMuiTheme({
  palette: {
    primary: pink,
    secondary: indigo
  },
  overrides: {
    MuiButton: {
      root: {
        color: 'white',
        '&:hover': {
          backgroundColor: 'purple'
        }
      }
    }
  }
});

Save the file and go check out your swanky new AppBar!

What Now?

With theming, you can easily change lots of components very quickly. Making a theme for your site can expedite the styling process and keep it simple and clean.

But there is more to theming than just changing colors on buttons! So test it out! Investigate the docs! Make the ugliest website you can imagine! Make the prettiest!

Research a different React Framework. Do they have themes? If so, how is their theming different? Is it easier or harder to use?