How to setup Material-UI (MUI) theme globally in a React project?

Why to set up MUI theming?

Setting up a global theme in Material-UI is a powerful way to maintain a consistent design system across your entire React application.

• Centralized style management

  All your designs - colors, fonts, spacing, shapes are managed in one place thus making it easy to maintain consistency across your app.

• Easy theme switching

  You can easily switch between different themes such as light or dark modes, and enable dynamic switches based on user preferences or system settings.

• Improves Scalability

  As your project grows having a common place to edits fonts, shapes, themes are seamlessly applied throughout your app without requiring manual edits in multiple files.

• Customization Components

  With theming, you can override components default styles and write your own styles thus giving us flexibility. For eg: Changing the default style for H1 style in Typography.

What Is Included in MUI Theming?

Theming in MUI includes the following configurable aspects:

1. Palette: Customize primary, secondary, error, info, success and other color options.

2. Typography: Define global fonts styles, sizes and weights foe headings, body text and more.

3. Shape: Configure border radius globally for cards, buttons and components.

4. Components: Override default props for mui components (eg: Button, TextField or CssBaseline)

5. Breakpoints: Adjust responsive layouts for different screens (eg: Phones, Mobiles, Desktop).

How to Set Up MUI Theming?

1. Install MUI:

    npm install @mui/material @emotion/react @emotion/styled
   

2. Creating a theme.js File for Your Project

In this step, we'll define a theme.js file to centralize all theming configurations for your React project. This file will include:

• Default Styles for Shapes: For example, setting a default borderRadius for all components.

• Typography Customization: Defining default fonts and styles for various text elements like headings and body text.

• Component Defaults: Setting default props or styles for specific Material-UI components.

• Global Style Overrides: Applying styles to the entire application, such as scrollbar customization or resetting the default browser styles.

Here's an example theme.js file:

import { createTheme } from "@mui/material";

export function setupTheme() {
    const palette = {
      primary: {
        main: "#406da4",
      },
      secondary: {
        main: "#E6EEF2",
        dark: "#CFDDE5",
      },
      text: {
        primary: "#555",
      },
      background: {
        main: "#fff",
      },
    };

    return createTheme({
      palette,
      shape: {
        borderRadius: 10,
      },
      typography: {
        htmlFontSize: 10,
        fontFamily: "Roboto, Arial, sans-serif",
        h1: {
          fontSize: "3rem",
        },
        h2: {
          fontSize: "2.7rem",
        },
        h3: {
          fontSize: "2.5rem",
        },
        body1: {
          fontSize: "1.4rem",
        },
        body2: {
          fontSize: "1.2rem",
        },
        body3: {
          fontSize: "1.25rem",
        },
      },
      components: {
        MuiCssBaseline: {
            styleOverrides: ({ palette }) => {
               return `
                   html {
                      font-size: 62.5%;
                   }  
                   *::-webkit-scrollbar {
                      height: 8px;
                      width: 8px;
                   }
                   *::-webkit-scrollbar-track {
                      border-radius: 4px;
                      background-color: ${palette.secondary.main};
                   }
                    *::-webkit-scrollbar-track:hover {
                      background-color: ${palette.secondary.dark};
                    }
                    *::-webkit-scrollbar-track:active {
                      background-color: ${palette.secondary.dark};
                    }
                `;
            }
        },
        MuiButton: {
          styleOverrides: {
            borderRadius: 20,
            fontWeight: "bold",
          },
          defaultProps: {
            variant: "contained",
            disableElevation: true,
          },
        },
        MuiStack: {
          defaultProps: {
            gap: 2,
          },
        },
      },
    });
}

Integrating theme.js in index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { setupTheme } from './theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
const theme = setupTheme(); 

root.render(
  <ThemeProvider theme={theme}>
    <CssBaseline enableColorScheme />
    <App />
  </ThemeProvider>
);

Now to use this in our App.js file.

import { Box, Paper, Stack, Typography, Button } from "@mui/material";

function App() {
  return (
    <Box sx={{ p: 2 }}>
      <Typography variant="h1" color="primary">
        This is H1
      </Typography>
      <Typography variant="h2" color="secondary">
        This is H2
      </Typography>
      <Typography variant="h3">This is H3</Typography>
      <Paper sx={{ p: 2, mt: 2, bgcolor: "secondary.main" }}>
        <Typography color="text.primary">This is inside a Paper component</Typography>
      </Paper>
      <Stack direction="row" spacing={2} mt={2}>
        <Button variant="contained" color="primary">
          Button 1
        </Button>
        <Button variant="outlined" color="secondary">
          Button 2
        </Button>
      </Stack>
    </Box>
  );
}

export default App;

Congratulations! 🎉

You’ve successfully integrated MUI theming with React. Now, you can explore the MUI documentation further to experiment with different themes and customizations. Try creating and applying new themes to see the full potential of theming in your app.

Thank you for staying till the end—happy coding! 🙌

What’s Next?

Ready to dive deeper into Material-UI and React? Check out our other blogs for practical guides and tips to enhance your projects. Every new article builds on your journey to mastering React!