Configurar basica MUI con Vite

#react #vite #materialui

Instalación basica de MUI

Dependencias de MUI

yarn add @mui/material @emotion/react @emotion/styled

Fuentes

Colocar el siguiente link en el index.html antes de la etiqueta </head>

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Iconos

yarn add @mui/icons-material

Configuración de MUI en Vite

En el directorio scr/, crearemos un directorio llamado theme/ y dentro crearemos los siguientes archivos:

1.- Crearemos un higher order component con el nombre de AppTheme.jsx

import { ThemeProvider } from '@emotion/react';
import { CssBaseline } from '@mui/material';

import { greenTheme } from './greenTheme';

export const AppTheme = ({ children }) => {
  return (
    <ThemeProvider theme={ greenTheme }>
      <CssBaseline />
      { children }
    </ThemeProvider>
  )
}

2.- Ahora crearemos el tema (en este caso) greenTheme.js

import { createTheme } from '@mui/material';
import { red } from '@mui/material/colors';


export const greenTheme = createTheme({

  palette: {
    primary: {
      main: '#35bf31'
    },
    secondary: {
      main: '#72bf31'
    },
    error: {
      main: red.A400
    }
  }

});

3.- Aplicamos la configuración en el main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'

import { AppTheme } from './theme/AppTheme'

import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <AppTheme>
      <App />
    </AppTheme>
  </React.StrictMode>,
)

Con esta configuración minima tenemos MUI andando en un proyecto con Vite