Skip to main content

Mui

Status: Finalizado ✅

O Material-UI (MUI), é uma das mais populares bibliotecas de componentes do React. Ela torna possível utilizar os padrões do Material Design do Google em nossas aplicações React.

Documentação Oficial​

Para mais detalhes, consulte a documentação oficial do MUI.

Instalação do MUI​

O MUI está disponivel para instalação como um pacote npm. Para fazer a instalação, execute:

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

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

Importar componentes do MUI no projeto​

Para fazer isso é bem simples. Aí vai o que precisa para fazer a importação de um Button, como exemplo.

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Elementos do MUI​

O MUI possui diversos componentes pré-estilizados que podemos usar em nossos projetos para deixa-los mais agradáveis e rápidos. Aqui vão exemplos de como importar alguns deles:

Button​

Os botões têm 3 estilos básicos: Texto, Contido e Delineado.

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

Podemos personalizar atributos desses elementos, como:

  • Manipular cliques:
Button
  onClick={() => {
    alert('clicado');
  }}
>
  Clique aqui
</Button>
  • Cor:
 <Button cor="secondary"> Secondary </Button>
  • Tamanho:
<Button size="small">Pequeno</Button>
<Button size="medium">Médio</Button>
<Button size="large">Grande</Button>

Material Icons​

Para utilizar Material Icons do MUI, primeiro deve-se instalar o pacote no diretório do projeto usando:

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

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

Escolha um Icon na aba Material Icons digitando o tipo na caixa de pesquisa:

url

Clique sobre o Icon escolhido.

url

Copie a sua importação e cole no projeto.

url

Existem várias outras possibilidades que estão disponíveis na documentação oficial do MUI.

Existem diversos outros componentes MUI que usamos no Obra Play, como Icons, Accordion e vários outros que vale a pena dar uma olhada. Eles estão disponíveis na aba Components da documentação oficial.