Instalação

Instale o Material-UI, a biblioteca de componentes React UI mais popular do mundo.

O Material-UI está disponível como um pacote do npm.

npm

Para instalar e salvar em suas dependências do package.json, execute:

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

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

Note que o pacote possui 2 dependências obrigatórias: react >= 16.8.0 e react-dom >= 16.8.0.

Fonte Roboto

O Material-UI foi desenvolvido com base na fonte Roboto. Portanto, certifique-se de seguir estas instruções para carregá-la. Como alternativa, carregue através do Google Web Fonts:

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

Ícones

Para utilizar o componente de fonte Icon, você deve primeiro adicionar a fonte Material icons. Aqui estão algumas instruções sobre como fazer isso. Como alternativa, carregue através do Google Web Fonts:

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

Ícones SVG

Para usar os ícones SVG pré-definidos do Material, como os encontrados na demonstração de ícones você deve primeiro instalar o pacote @material-ui/icons:

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

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

CDN

Você pode começar a utilizar o Material-UI com o mínimo de infraestrutura de frontend, o que é bom para prototipação.

Dois arquivos Universal Module Definition (UMD) são fornecidos:

• um para desenvolvimento: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
• um para produção: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js

Você pode seguir esse exemplo de CDN para dar um pontapé inicial.

⚠️ Usar essa abordagem em produção não é recomendada devido que - o cliente tem que baixar toda a biblioteca, independentemente de quais os componentes que são realmente utilizados, o que afeta o desempenho e a utilização da largura de banda.

⚠️ Os links UMD estão usando a tag latest para apontar para a versão mais recente da biblioteca. ⚠️ Os links UMD estão usando a tag latest para apontar para a versão mais recente da biblioteca. Você deve considerar apontar para uma versão específica, como v4.4.0.

Recursos de design

Esta é uma coleção de projetos de terceiros que estendem Material-UI.

• Sketch: Sketch para Material-UI — Um kit de interface de usuário grande com mais de 600 símbolos de Material-UI trabalhados à mão 💎.
• Figma: Figma para Material-UI — Um kit de interface de usuário grande com mais de 600 componentes de Material-UI trabalhados à mão 🎨.
• Framer: Framer para Material-UI — Um pequeno kit MIT de interface de usuário em preview, de componentes de Material-UI trabalhado a mão.