How to Customize Material UI Theme

Material UI is one of the most popular front-end UI framework. In this blog post we are going to take a look at how to customize a material ui theme. There are several reasons why you would want to customize a theme. Maybe a customer has a specific color palette or you are not happy with the built in theme.

You can change the colors, the typography, font-size and much more. Let’s take a look.

Different ways to customize the theme

We will be looking at how to do this using React. In order to change the theme you need a ThemeProvider component to inject a theme into your application. You can do it like this:

<ThemeProvider theme={theme}>
  <CustomComponent />
</ThemeProvider>

But you must be asking where does theme in ThemeProvider come from? Well this is our custom theme and looks like this:

const theme = createTheme({
  palette: {
    primary: {
      main: Colors.primary,
    },
    secondary: {
      main: Colors.secondary,
    },
  },
});

Colors can be an object with the theme colors. By doing this you are basically changing the theme of your app. Check out this video where I demonstrate this in a React project.

https://youtu.be/8TID2i4zksg