DEV Community

Juan Pablo Pérez lantes
Juan Pablo Pérez lantes

Posted on

2

Configurar basica MUI con Vite

Instalación basica de MUI

  • Dependencias de MUI
yarn add @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode
  • 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"
/>
Enter fullscreen mode Exit fullscreen mode
  • Iconos
yarn add @mui/icons-material
Enter fullscreen mode Exit fullscreen mode

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>
  )
}

Enter fullscreen mode Exit fullscreen mode

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
    }
  }

});
Enter fullscreen mode Exit fullscreen mode

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>,
)
Enter fullscreen mode Exit fullscreen mode

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs