Pular para o conteúdo
Ajude a traduzir esta página

Instalação

Instale Material UI! O framework UI mais popular do mundo de React.

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

npm

Para instalar e salvar as dependências do seu pacote.json, execute o seguinte comando npm abaixo:

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

Ou yarn

yarn add @mui/material @emotion/react @emotion/styled

Por favor, note que react >= 17.0.0 and react-dom >= 17.0.0 são dependências obrigatórias.

Material UI está usando a biblioteca emotion como o motor de estilo padrão. Se você quiser usar styled-components, execute:

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

yarn add @mui/material @mui/styled-engine-sc styled-components

Fonte Roboto

Material UI foi projetado com a fonte Roboto em mente. Então certifique-se de seguir estas instruções. Por exemplo, usando o Google Web Fonts:

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

Ícones de fonte

To use the font Icon component, you must first add the Material Icons font. Here are some instructions on how to do so. For instance, via Google Web Fonts:

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

Ícones SVG

In order to use prebuilt SVG Material icons, such as those found in the icons demos you must first install the @mui/icons-material package:

Com npm:

npm install @mui/icons-material

Com yarn:

yarn add @mui/icons-material

CDN

You can start using Material UI with minimal Front-end infrastructure, which is great for prototyping.

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

You can follow this CDN example to quickly get started.

⚠️ Using this approach in production is discouraged though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.

⚠️ The UMD links are using the latest tag to point to the latest version of the library. This pointer is unstable, it shifts as we release new versions. You should consider pointing to a specific version, such as v5.0.0.

Recursos de design

figma adobe-xd sketch

Um conjunto de componentes reutilizáveis para ferramentas de design está disponível, projetado para corresponder aos componentes React e ajudá-lo a construir ótimos produtos:

  • 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: A large UI kit with over 600 handcrafted Material UI symbols.
  • UXPin: A large UI kit of Material UI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment.