Instalación

Instala Material-UI, el framework de IU para React más popular del mundo.

Material-UI está disponible como un paquete npm .

npm

Para instalarlo y guardarlo en las dependencias de tu package.json, ejecuta:

// with npm
npm install @material-ui/core@next @emotion/react @emotion/styled

// with yarn
yarn add @material-ui/core@next @emotion/react @emotion/styled

Ten en cuenta que react > = 16.8.0 y react-dom > = 16.8.0 son dependencias tipo "peer".

Fuente Roboto

Material-UI fue diseñado con la fuente Roboto en mente. Así que asegúrate de seguir estas instrucciones . Por ejemplo, a través de Google Web Fonts:

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

Fuente de Iconos

Aquí hay algunas instrucciones sobre cómo hacerlo. Aquí hay algunas instrucciones sobre cómo hacerlo. Por ejemplo, a través de Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Iconos SVG

Para poder utilizar los íconos SVG Material precompilados, como los que se encuentran en los demos de íconos, primero debes instalar el paquete @material-ui/icons:

// usando npm
npm install @material-ui/icons

// usando yarn
yarn add @material-ui/icons

CDN

Puedes comenzar a utilizar Material-UI con una infraestructura mínima de front-end, lo que es excelente para la creación de prototipos.

Se proporcionan dos archivos de Definición Universal de Módulos (UMD):

• uno para desarrollo: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
• uno para producción: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js

Puedes seguir este ejemplo sobre CDN para empezar rápidamente.

⚠️ Sin embargo, utilizar esta estrategia en producción no es aconsejable - ya que el cliente tiene que descargar la biblioteca completa, sin importar cuales son los componentes que realmente están en uso, afectando al desempeño y la utilización de ancho de banda.

⚠️ Los enlaces UMD están utilizando la etiqueta latest para hacer referencia a la última versión de la biblioteca. ⚠️ Los enlaces UMD están utilizando la etiqueta latest para hacer referencia a la última versión de la biblioteca. Deberias considerar hacer referencia a alguna versión específica, por ejemplo, v4.4.0.

Recursos de diseño

A set of reusable components for design tools is available, designed to match the React components, and to help you craft great products:

• Figma: A large UI kit with over 600 handcrafted Material-UI components.
• Sketch: Sketch for Material-UI — A large UI kit with over 600 handcrafted Material-UI's symbols 💎.
• Adobe XD: A large UI kit with over 600 handcrafted Material-UI components.
• Framer: Framer for Material-UI — A small MIT UI kit preview of handcrafted Material-UI's component.