How to create a custom theme in React Material UI

Last updated on Jun 10, 2021 by Suraj Sharma



In this tutorial, you will learn how you can create your own custom theme in React Material UI.


Create a custom theme


To create a custom theme, Mui exposes a createMuiTheme method, which accepts a custom theme object as an argument.


// theme.js

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

const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#1976d2'
      },
      success: {
        main: '#4caf50'
      }
    },
    typography: {
      fontSize: 16,
      h3: {
        fontWeight: 700,
        fontSize: '2.2rem'
      },
      h4: {
        fontWeight: 700,
        fontSize: '1.75rem'
      },
      h5: {
        fontWeight: 500
      },
      h6: {
        fontWeight: 500
      }
    }
  })

  export default theme;

createMuiTheme method concatenates the default theme object and the custom theme object, it returns a theme object.


Pass the theme to ThemeProvider


Once you have created your own theme object, pass that theme to the theme props of the Mui <ThemeProvider /> component inside the <App /> component, making your theme available to all components in your project.


// App.jsx

import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';

const App = () => {

  ...

  return (
    <ThemeProvider theme={theme}>
      <Component />
    </ThemeProvider>
  );
}


Related Solutions


Rate this post


Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.