Material UI

Instalación predeterminada Ejecute uno de los siguientes comandos para agregar Material UI a su proyecto:

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

Dependencias entre pares

Tenga en cuenta que react y react-dom son dependencias de pares, lo que significa que debe asegurarse de que estén instaladas antes de instalar la interfaz de usuario del material.

"peerDependencies": {

"react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" },

Con componentes estilizados

Material UI utiliza Emotion como motor de estilo predeterminado. Si quieres usarlo componentes estilizados en su lugar, ejecute uno de los siguientes comandos:

npm install @mui/material @mui/styled-engine-sc styled-components

Fuente Roboto

La interfaz de usuario del material utiliza Roboto fuente por defecto. Agregue a su proyecto a través de Fontsource o con Google Fonts CDN.

import '@fontsource/roboto/300.css';

import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css';

Fuentes web de Google

Para instalar Roboto a través de la CDN de Google Web Fonts, agregue el siguiente código dentro de su proyecto etiqueta:

<enlace rel="preconectar" href="https://fonts.googleapis.com" />

Iconos

Para usar el componente de icono de fuente o los iconos de materiales SVG prediseñados (como los que se encuentran en el demostraciones de iconos), primero debes instalar el Iconos materiales font.Puedes hacerlo con npm o con el CDN de Google Web Fonts.

npm install @mui/icons-material