Setup

Instructions to the existing project. Use the starter version when you want to build a new project

Step 1: Create new app vite.js

npm create vite@latest

✔ Project name: … vite-project
✔ Select a framework: React
✔ Select a variant: JavaScript + SWC

Step 2: Install the required dependencies

npm i @emotion/react @emotion/styled @iconify/react @mui/lab @mui/material lodash prop-types

Step 3:

Copy .eslintignore

Copy src/components/iconify

Copy src/theme

Remove src/theme/options

Update src/theme/index

// src/theme/index.js
 
import PropTypes from 'prop-types';
import { useMemo } from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import { palette } from './palette';
import { shadows } from './shadows';
import { typography } from './typography';
import { customShadows } from './custom-shadows';
import { componentsOverrides } from './overrides';
 
export default function ThemeProvider({ children }) {
  const memoizedValue = useMemo(
    () => ({
      palette: palette('light'), // or palette('dark')
      shadows: shadows('light'), // or shadows('dark')
      customShadows: customShadows('light'), // or customShadows('dark')
      shape: { borderRadius: 8 },
      typography,
    }),
    []
  );
 
  const theme = createTheme(memoizedValue);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}
 
ThemeProvider.propTypes = {
  children: PropTypes.node,
};

Step 4: Wrap <ThemeProvider/>

// src/App.jsx
 
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import ThemeProvider from 'src/theme';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
 
function App() {
  const [count, setCount] = useState(0);
 
  return (
    <ThemeProvider>
      <Stack spacing={1} alignItems='center'>
        <Button variant='contained'>Button</Button>
        <Button variant='contained' color='primary'>
          Button
        </Button>
        <Button variant='contained' color='secondary'>
          Button
        </Button>
        <Button variant='contained' color='info'>
          Button
        </Button>
        <Button variant='contained' color='success'>
          Button
        </Button>
        <Button variant='contained' color='warning'>
          Button
        </Button>
        <Button variant='contained' color='error'>
          Button
        </Button>
        <Button disabled variant='contained'>
          Button
        </Button>
      </Stack>
 
      <div>
        <a href='https://vitejs.dev' target='_blank'>
          <img src={viteLogo} className='logo' alt='Vite logo' />
        </a>
        <a href='https://react.dev' target='_blank'>
          <img src={reactLogo} className='logo react' alt='React logo' />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className='card'>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className='read-the-docs'>
        Click on the Vite and React logos to learn more
      </p>
    </ThemeProvider>
  );
}
 
export default App;

Note:

Should also update other files like:

jsconfig.json
tsconfig.json