Como usar Material UI com Next.js

Se você é desenvolvedor/a front-end, deve saber que a identidade da marca está presente em cada componente da web. Existem muitas ferramentas e bibliotecas para gerenciar os estilos de um site, começando com Sass onde você já pode aplicar estilos por componentes, e finalizando com Material UI, uma biblioteca com componentes já desenvolvidos, documentação clara e, o melhor de tudo, muitos elementos que podem ser facilmente customizados.

Por que usar Material UI?

Existe uma frase bem conhecida que tenho ouvido muito no desenvolvimento web: “Não vamos reinventar a roda”. Atualmente, existem muitas ferramentas e bibliotecas que facilitam muito o desenvolvimento. Recentemente, tentei criar componentes do zero e há muito o que abordar, desde a estrutura do aplicativo até estilos e comportamento. Qual foi o final da história? Usei uma biblioteca de componentes e, se necessário, foram feitas alterações no componente.

Comecei a usar o Material UI e o que levo é a flexibilidade de seus componentes, não só nos estilos, mas também na forma e nos elementos que o compõem. Além das variantes, o Material UI expõe cada elemento de um componente para ser personalizado. Por exemplo, um textfield tem uma borda de 2 px e pode exibir uma mensagem de erro vermelha. No arquivo de configuração, posso alterar a borda para 1 px e alterar a cor para outra coisa.

Além disso (e como bônus), o Material UI oferece um kit de interface do usuário em Figma, Adobe e Sketch para ser usado por designers ao fazer suas propostas.

Para acabar com as vantagens, a documentação da biblioteca é muito importante. No tempo em que trabalho com Material UI, raramente recorri a blogs ou outras fontes além de sua documentação, e tudo funciona de primeira!

Comecemos!

Instalaremos o Material UI em um próximo projeto. Para fazer isso, você deve saber o seguinte:

• Typescript.
• Next.js.

Criar o projeto Next.js

Inserimos o seguinte no console:

Temos a seguinte estrutura de arquivos:

Executamos o comando para ver a web:

npm run dev

Agora adicionamos uma página chamada Material.

Entramos em localhost:3000/material, onde veremos os componentes de Material UI que iremos adicionar.

Instalar Material UI

Executamos o seguinte comando:

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

Uma vez instalada a biblioteca, podemos utilizar os componentes com os estilos padrão. O objetivo é trocar os estilos pelos da nossa marca.

Substituímos o conteúdo de material.tsx pelos botões Material UI com suas variantes:

Os botões serão exibidos na captura de tela a seguir. Você pode brincar com suas variantes e cores:

Agora vamos customizar os componentes. Para isso, criamos um tema que terá os valores de cores, fonte, tamanhos, etc.

O tema revelo.ts exporta as configurações do Material no formato json.

Cores no Material UI

Mudamos as cores primary e secondary, mas ainda não veremos as alterações na web até usarmos o tema que criamos em material.tsx.

Antes de pintar ou como pai dos componentes, adicionamos o ThemeProvider:

Agora, se formos para a web, os componentes serão pintados com as novas cores:

Além disso, Material UI usa as cores dark para estados de botão. Nesse caso, o botão principal está no estado hover e a cor é pintada primary.dark.

Material UI não só oferece a cor primária e secundária, mas também fornece uma lista personalizável na biblioteca:

• black.
• white.
• primary.
• secondary.
• success.
• info.
• warning.
• error.
• grey.

Além disso, se tivermos cores para adicionar, podemos expandir a interface da pallete.

Assim podemos adicionar tons de cores conforme a necessidade, e utilizá-los em componentes. Resta apenas definir essas cores:

Fontes no Material UI

Material UI usa Roboto por padrão, então vamos mudar a fonte para Rubik.

Primeiro, vamos ao Google Fonts para selecionar a fonte e obter o código de como importar a fonte com seus diferentes font-weight.

Em seguida, definimos a fonte em revelo.ts:

E veremos a mudança:

Além da mudança de fonte, o Material UI oferece headings, subtítulos, captions, etc. E cada etiqueta pode ser personalizada com uma fonte, peso e espaçamento:

Componentes no Material UI

Material UI é uma biblioteca de componentes. Nas etapas anteriores, mudamos cores e fontes e devemos levar em consideração que elas se aplicam a todos os componentes que a biblioteca oferece. Agora que temos essa configuração geral, veremos alguns dos componentes mais usados ​​e como personalizá-los.

Material UI oferece componentes de informação e visualização de dados (cards, tablas, tabs, etc) como inputs (textfields, botones, checkbox, etc). Estou mais interessada em customizar os inputs, pois com esses componentes temos variantes, estados, interações, erros e mais pontos a cobrir.

Inputs no Material UI

O componente textfield é básico em um formulário e temos um padrão de como ficaria visualmente. Nesta seção vamos começar com textfields e cobriremos suas partes como input, label, etc. Aqui estão algumas variantes do textfield e o que podemos personalizar.

Começamos pintando dois textfields:

Como resultado, temos o seguinte (as imagens à direita têm um estado focus):

Se quisermos mudar a cor cinza do label, helperhext ou a borda, faremos isso a partir do componente. Abaixo está um exemplo com o textfield com cores muito diferentes para dizer a diferença.

Para começar a mudar os componentes, devemos adicionar components na altura de palette. Dentro de components escrevemos Mui e podemos aproveitar o preenchimento automático para localizar o componente.

Para ajustar o cinza do componente, devemos fazê-lo de MuiTextField. O que o Material UI faz com styleOverrides é substituir os estilos do componente. Agora, como sei quais são os componentes do TextField? Muito fácil, se você inspecionar o elemento verá como ele arma o field e, por tags, você pode customizar cada elemento.

Mudamos a cor do label por uma cor verde, a cor do helperText o que está em uma etiqueta p e a borda de field o que está na etiqueta fieldSet.

Com essas mudanças, o novo textField se parece com isso:

Uma recomendação muito importante em inputs (textField, select, checkbox, radio button, switch) é mudar os estilos de cada componente que forma esse componente maior, pois se modificarmos os estilos de cada componente pequeno, isso será aplicado a todos os inputs. Veremos um exemplo a seguir:

Se pintarmos um select, ficaria assim:

Como vemos, os estilos de label, borda e helperhext foram aplicados somente ao textfield. E se modificarmos MuiInput, o MuiLabel e MuiHelperText, as alterações serão aplicadas a ambos os componentes:

O resultado é o seguinte:

Tudo visto até agora são mudanças de estilo, mas e se eu quiser mudar a estrutura do componente (por exemplo, tirar o espaço ocupado pelo label bem na borda de textfield e select outlined?).

Como esta é uma propriedade da variante outlined, vamos mudar o componente MuiOutlinedInput com notchet:false e diremos à biblioteca para não pintá-lo ou considerá-lo no componente. Não esqueçamos que a biblioteca possui uma documentação muito completa, em MuiOutlinedInput podemos ver este item:

Então, fazemos a alteração:

Com essa alteração, o textfield e select são pintados assim:

Posso carregar o label para torná-lo visível:

E agora eu tenho um componente outlined diferente:

Agora que temos um textfield, veremos erros.

Começamos adicionando o atributo error ao textfield:

Agora parece com isso:

Se eu quiser adicionar estilos ao texto do erro:

Se parece com isso:

Como sei qual classe adicionar? Material UI joga com as classes dos elementos. Então eu inspeciono o elemento e vejo que ele tem uma classe MuiError:

O text-decoration:underline é o estilo que adicionamos do theme do Material, Se nós fizermos scroll veremos os outros estilos que tinha por padrão.

Até agora, cobrimos, passo a passo, como instalar o Material UI, um pouco de estilo geral e de componentes e algumas recomendações relacionadas. Mas antes de terminar vamos com um pouco mais de informação.

Conclusões e recomendações

• É muito bom não se ver limitado pela livraria que escolheu. Às vezes, há pontos ao longo do caminho que fazem você se perguntar se deveria ter escolhido outra ferramenta. Este não é o caso. Há muita informação no site deles e você pode aproveitar todas as vantagens que quiser. Cobrimos alguns exemplos aqui, mas o Material UI oferece muito mais componentes.
  
• Se você tiver muitos formulários, é recomendável criar uma pasta de componentes onde você estende os componentes da interface do usuário do material, para não precisar personalizar os componentes repetidamente.
  
• Material UI oferece em sua documentação a lista de componentes e uma seção Component API onde você pode ver todas as propriedades que cada componente possui, o tipo de dados que aceita e uma descrição. Além disso, na seção Personalização, você pode ver o tema padrão.
  

Espero que este artigo sirva como ponto de partida e encoraje você a experimentar o Material UI, bem como a criar sua nova biblioteca de componentes com seus próprios estilos.

Até a próxima!