Creating Material UI themes in React

Material UI is one of the most popular React UI framework. It has made working with React extremely enjoyable. Out of the box, it has all the necessary components required to build a modern web ui and many more. Easy to use, easy to setup and most importantly easy to configure.

One of the major aspects of Material UI is theming. It helps us to create a global and default style for our projects.

Let’s look at how we can create Material UI themes and use them to build reusable ui pages.

React with Material UI

If inline styles or makeStyles is used, there is a chance that some of the style properties are repeated very often. This approach makes it difficult to update the style if there is a change in the design.

For example, if the button variant “contained” and colour “primary” is the desired style of the project, then one might find the following code everywhere:

<Button variant="contained" color="primary"> Primary </Button>

If the design is changed to only outlined , one might need to change it in multiple places.

This can be taken care in Material UI theme. We can specify the default style of a button and it will be applied to all the buttons, unless specified otherwise. This helps us in avoiding repeated code and keeping the default style of the UI at one central location.

The colour palette is one option that is changed in most of the projects. This is something that should be configured in themes rather than doing something like this:

<Button 
      variant="contained" 
      style={{ background: 'purple', color: 'white' }}> 
   Primary
</Button>

Let’s take a very simple UI with default Material theme and see how we can update the design using themes without touching the actual components.

Basic UI using Material UI’s default theme.

Creating a Material UI theme

Let’s start with creating a file Theme.js . This will be where we will add all our theme configuration. The best thing about Material UI’s theme customization is that we can create beautiful themes just by using Javascript’s object style code.

Now let’s import createMuiTheme from @material-ui/core . We will be using it to create a theme.

Changing the colour palette and typography

All we have to do is add the colours that we want under palette . This overrides the default colours that are shipped with Material UI.

const theme = createMuiTheme({
     palette: {
         primary: {
             main: '#2C5F2D',
         },
         secondary: {
             main: '#97BC62',
         }
      }        
});

Now, like colours we can also override the default fontFamilyof the theme.

const theme = createMuiTheme({
     typography: {
        fontFamily: 'Times New Roman',
        fontSize: 15,
        h1: { // incase h1 needs to have a separate fontFamily 
            fontFamily: 'Roboto',
            fontSize: 15,
        }
     },
});

All the typography properties can be updated along with any style that needs to be specified for a tag.

Changing shape of components

If you notice, Material UI’s default cards and buttons have a slight border radius. Some designs have no border radius whereas some design might have even bigger border radius. This default shape can be changed using themes as well. This property will update the shape for all the components. We will look at component specific shapes in a little bit.

const theme = createMuiTheme({
     shape: {
        borderRadius: 0
     },
});

Wrapping your pages with ThemeProvider

This wrapping is done so that the child components get the theme properties without the need of specifying it explicitly.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@material-ui/core';
import { theme } from './Theme';
ReactDOM.render(
    <React.StrictMode>
       <ThemeProvider theme={theme}>
         <App />
       </ThemeProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Let’s see it in action.

Basic UI using Material UI’s theme with custom palette, typography and shape.

Let’s provide some default properties to the components that we might need to fit our design. For example, if all the buttons in the design are contained , then it makes sense to make it as default, rather than passing the prop contained everywhere we use Button .

Providing component props in theme.

The component properties can be assigned in props . These values will be used as default when using the assigned component. In this example, whenever we use Button , it will always be the contained variant of the button with primary colour.

export const theme = createMuiTheme({
    props: {
       MuiButton: {
         variant: 'contained',
         color: 'primary
       }
    }
})

If you notice, the Button is used as MuiButton which stands for Material UI Button. All the components that are available in Material UI, can be styled here using the Mui component. For example: MuiTextField, MuiCheckbox , MuiCard etc.

export const theme = createMuiTheme({
     props: {
       MuiButton: {
         variant: 'contained',
         color: 'primary',
       },
       MuiTextField: {
         variant: 'filled',
         InputLabelProps: {
             shrink: true
         }
      },
      MuiCard: {
        elevation: 5,
      },
      MuiCheckbox: {
        disableRipple: true
      }
   }
})

In the above example, the ripple effect is disabled for Checkbox , elevation is increased for Card and the input label animation is removed for TextField and its style is changed.

Let’s see it in action.

Basic UI using Material UI’s theme with custom palette, typography, shape and component props.

Now, these were some updates that was possible on the existing properties. We could also restyle the components by overriding the style classes used by the properties. For example, If in our design the buttons are pill shaped, we can add this style in the theme itself.

Restyling the components in theme

This can be done under overrides property of theme. Here as well, Mui components are used to update the style.

export const theme = createMuiTheme({
     overrides: {
        MuiButton: {
            root: {
              borderRadius: 30,
              textTransform: 'none',
              minWidth: '200px'
            }
        },
     },
})

In the above example, the button is changed to pill shaped, “UPPERCASE” text transformation is removed and a minimum width is provided. All the buttons used in the project, by default, will have these styles applied to them.

Let’s take a look at the theme now and see where we stand.

Basic UI using Material UI’s theme with custom palette, typography, shape, component props and restyling.

Ability to style components using Material UI’s theme gives us the freedom to build reusable UI components that can be used and styled by other teams. This helps us in creating functional components that are independent of brand design. Design can be taken care by the team using the component.

Here is an example of a simple Login page which are styled in three different designs without touching the actual components.

Simple Login form with default Material UI components

Simple login form using default Material UI components

Same Login form but with a theme

It is the same login form with custom theme

Let’s try one more theme

A different style for the login form

In the above three examples, the login form at its core remained the same, all that changed was the wrapping theme.

Material UI’s theming capability and possibilities are endless. A custom theme with properties can keep the code clean. It also avoids the overhead of remembering the style guide whenever a new component is implemented. A default behaviour can always be provided so that “digging” through documents can be avoided.

All the documentation regarding theming is available here as Material UI’s page.

Have fun using Material UI themes.

Further Reading

Theming React Apps with Styled Components and Bit

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.