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
Top comments (0)