How to set up custom themes in Material-UI with React?

To set up custom themes in Material-UI with React, follow these steps:

Install Material-UI library in your project by running the following command:

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

Create a new file for your custom theme, for example, theme.js, and define your custom theme using the createTheme function from Material-UI. Here is an example of a custom theme:

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#2196f3',
    },
    secondary: {
      main: '#f50057',
    },
  },
});

export default theme;

Wrap your root component in the ThemeProvider component and pass your custom theme as a theme prop:

import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      // your app components here
    </ThemeProvider>
  );
}

export default App;

You can now use the custom theme in your components by importing the useTheme hook from Material-UI and accessing the theme properties, for example:

import React from 'react';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';

function CustomComponent() {
  const theme = useTheme();

  return (
    <Typography color={theme.palette.primary.main}>
      This is a custom component using the primary color from the theme.
    </Typography>
  );
}

export default CustomComponent;

By following these steps, you can easily set up custom themes in Material-UI with React and style your components according to your design requirements.