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 />

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.