How to create a custom theme in React Material UI

Last updated on Oct 15, 2022 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 createTheme method, which accepts a custom theme object as an argument.

// theme.js

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    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;

createTheme 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 '@mui/material/styles';
import theme from './theme';

const App = () => {


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

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.