How to create a custom theme in React Material UI

#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.