How to create a custom theme in React Material UI

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 />
    </ThemeProvider>
  );
}

Related Solutions

• How to use Material UI icons in React Material UI

• How to make React Material UI Typography bold

• How to change font family of typography in React Material UI

• How to build a dark mode theme in React Material UI