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 > = 17.0.0 y react-dom > = 17.0.0 son dependencias tipo "peer".

Or if you want to use styled-components as a styling engine:

// with npm
npm install @material-ui/core@next @material-ui/styled-engine-sc@next styled-components

// with yarn
yarn add @material-ui/core@next @material-ui/styled-engine-sc@next styled-components

Take a look at the Styled Engine guide for more information about how to configure styled-components as the style engine.

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

To use the font Icon component, you must first add the Material icons font. Here are some instructions on how to do so. 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.
• Adobe XD: 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 💎.
• Framer: Framer for Material-UI — A small MIT UI kit preview of handcrafted Material-UI's component.