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

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;