How to Add Themes in Material UI ?

In Material UI, themes allow easy customization of design elements like colors and typography in React apps. The MuiThemeProvider component applies these themes across the app, ensuring consistent visuals.

Installation

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

The table below illustrates the Terms alongside their Descriptions.

Term	Description
@mui/material	Package containing Material UI components.
@emotion/react	Required for styling components with Emotion.
@emotion/styled	Required for styling components with Emotion.

Features

• Theme Configuration: Define custom themes by specifying colours, typography, and other design properties to reflect your brand’s identity.
• Theme Provider: Wrap your application with the MuiThemeProvider component to make the theme accessible to all Material UI components.
• Theme Customization: Easily customize the theme using the createTheme function, allowing adjustments to palette colours, typography, and more.
• Global Styles: Apply global styles to your application using the GlobalStyles component, ensuring consistency throughout your project.
• Theme Switching: Implement dynamic theme-switching functionality to allow users to switch between light and dark themes seamlessly.

Example:

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material';
import App from './App';

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

function ThemeApp() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

export default ThemeApp;