Chakra UI: criando interfaces intuitivas sem uma única linha de CSS

6 min readJan 3, 2022

Nada de arquivos e mais arquivos de CSS, apenas declaração de estilo no próprio HTML

Como estamos condicionados a estilizar nossos componentes

Estilização de componentes frontend nada mais é do que criarmos nossas classes CSS, com ou sem pré processadores de CSS, como SASS e LESS. Tais classes são criadas separadamente, utilizando algum escopo de módulo ou global, e assim importamos o arquivo nas páginas e/ou componente que desejamos utilizar.

Essa forma já é bem concretizada entre nós, pessoas desenvolvedoras frontends, nos acostumamos (condicionamos) a criar arquivos e mais arquivos CSS para estilizar nossa aplicação. De fato, esse parece ser o jeito mais “correto”, mas será que é a única forma de estilizarmos nossos componentes?

O que é Chakra UI

Não, não é o chakra de Naruto. Chakra UI é uma biblioteca open source, de componentes simples, modular e acessível que fornece “blocos” de construção que você precisa para construir seus aplicativos em React, Vue, Next, Nuxt, Gastby entre outros. É um biblioteca declarativa: ou seja, você irá estilizar tudo no próprio HTML.

Porque utilizar Chakra UI

Cada vez mais nós pessoas desenvolvedoras, precisamos ter mais tempo para nos preocupar com o que realmente interessa em uma aplicação: funcionalidades que ajudem o usuário e correções de bugs. É pra isso que existem frameworks como Vue, React, Angular etc. Para que possamos otimizar nosso desenvolvimento de software, ganhando rapidez e sobrando tempo para o ócio criativo. Partindo dessa premissa, temos então que Chakra UI segue esse mesmo pensamento, para criarmos interfaces intuitivas, responsivas, bonitas e charmosas sem nos preocuparmos em criar tudo do zero: temas, classes, grids, animações… já cansei só de escrever. Com essa biblioteca é muito fácil ter um form bonito, funcional e responsivo.

Vantagens

Chakra UI não é uma biblioteca como Materialize ou Bootstrap, ele não irá fornecer linhas de código que você irá copiar e colar e pronto, tudo estará lindo. Chakra UI irá te fornecer “blocos” declarativos de tag HTML com estilizações in-line dessa tag (mais pra frente explico com exemplos). Chakra UI é uma biblioteca mais robusta e focada em layout que também fornece aos desenvolvedores componentes de UI semelhantes ao que o Material UI fornece, mas tem um foco maior na criação de código flexível, combinável e escalonável.

O objetivo principal é projetar componentes simples e combináveis que atendam a problemas de design de UI da vida real. Com Chakra UI, você consegue customizar temas, estilo global, cores, tudo como você preferir, não se limitando apenas ao que a biblioteca te oferece por padrão.

Alguns pontos a serem observados:

Intuitivo: modelo de componentes de estilo muito intuitivo, semelhante a CSS e baseado em props, tornando-o fácil de aprender. Os nomes dos componentes e das props também são muito fáceis de entender.
Responsividade: criação de estilos responsivos de uma forma muito fácil e intuitiva. Podendo utilizar notação de matriz ou de objeto.
Substituição de estilo: considerando que os estilos de Chakra UI são baseados em props, substituições é tão fácil quanto passar uma props.
Acessibilidade: como Chakra UI contém todos os benefícios de estilos do Tailwind CSS, por conveniência do Tailwind, acessibilidade já esta garantida também no Chakra
Dark Mode: todos os componentes são compatíveis com os modos claro e escuro. Podemos criar nossa própria experiência de modo claro e escuro.

Caso você já tenha ouvido falar na biblioteca Theme UI, poderá perceber uma forte relação entre Theme UI e Chakra UI, isso porque essa última foi totalmente baseada na Theme UI e segue todas as especificações dessa biblioteca. A diferença é que Chakra UI fornece mais componentes, uma API de estilo mais aprimorada, acessibilidade e API de componentes mais intuitivos do que Theme UI. Podemos pensar no Chakra como uma versão mais robusta dessa outra biblioteca.

Criando o primeiro componente com Chakra UI

Vamos ver agora como criar seu primeiro componente com Chakra UI.

Primeiro é necessário conferi na documentação se o framework web que esta utilizando faz integração com Chakra UI. Após isso, é necessário instalar o que for preciso para que a integração funciona corretamente. No caso do React, que vou usar de exemplo, será necessário instalar da seguinte forma:

npm:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

ou yarn

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

Feito isso já podemos criar nosso estilo conforme desejarmos.

Substituindo estilos

Por padrão o Chakra te oferece alguns tokens de cores

Mas podemos substituir e criarmos quais quisermos. Neste exemplo vamos substituir os tons de cinza.

Criando uma pasta styles e colocando dentro um arquivo theme.ts, ou theme.js caso não esteja utilizando typescript.

No arquivo acima foi criado e definido o objeto “colors”, e dentro o objeto “gray” a essa cor foi atribuído novas paletas de cores, não mais as utilizadas por default do Chakra. Criei também uma nova cor “greenNew” que não existe por padrão, mas que agora poderá ser utilizada em qualquer lugar da aplicação. Outras configurações que podem ser observadas é a de fontes e a de estilo global.

Ah! o Chakra por padrão já traz todo reset CSS necessário, caso não queira o reset pode-se passar uma props comoCSSReset=false.

Em nosso _app.tsx, vamos importar esse estilo criado e adiciona-lo ao nosso arquivo principal do next.js.

Caso esteja utilizando outro framework verificar onde injetar o estilo criado.

Agora que já temos nosso estilo definido, vamos criar nosso componente de form:

E agora sim, temos nosso primeiro componente com Chakra UI muito lindo, e sem nenhum arquivo de CSS. 👏👏👏👏

Explicando um pouco o que temos definido como props dentro dos inputs:

O Componente importado Flex , foi definido com width de 100vh, abreviação apenas “w” o mesmo para o height como “h”. Foi definido que o componente teria o comportamento de form, com a props “as=form”
BackgroudColor é abreviado para “bg” mas também pode ser bgColor
Padding é abreviado para “p”
Estilo do input definido em variant
Comportamento hover do input definido com _hover
Cor da borda do input quando tiver focus, definido com focusBorderColor
Tamanho do input, definido com size

Importante saber que os tamanhos tem uma definição própria do Chakra UI, consulte a documentação para saber quais tamanhos correspondem ao que você precisa.

Desvantagens

Claro que nem tudo são flores. Vamos falar agora do que pode ser desvantagens, ou apenas uma questão de mindset. Como já deu pra perceber o componente pode ficar muito grande, e para manutenção isso será péssimo. Porém, isso não chega ser uma desvantagem caso “quebremos” ainda mais os componentes. Nesse exemplo do form, o input poderia ser criado como um componente sozinho, recebendo props de labels, name, refs o que precisar. Isso fará com que os componentes não fiquem gigantescos, deixando com uma manutenibilidade muito melhor.

Outra desvantagem é saber exatamente qual propriedade pode ser passada para o componente. Embora o Chakra UI tenha uma integração com typescript muito boa, as vezes ela não resolve todos os problemas, como cores criadas que não são por padrão da biblioteca , e não conseguimos identifica-las apenas com um CTRL + espaço.

Conclusão

Ao final desse artigo espero que você tenha se convencido um pouco de que não precisamos todas as vezes que formos criar nossas aplicações, utilizarmos da velha metodologia de arquivos CSS. Digo velha, mas sabemos muito bem que ela ainda supre muito bem nossas expectativas e necessidades. Mas é interessante nos abrirmos para um novo paradigma sempre que possível. Estilização in-line como vimos com Chakra UI, pode nos poupar muito tempo e nos proporcionar ótimas experiências como pessoas desenvolvedoras de software web.

Referências: https://chakra-ui.com/