Personalizando um aplicativo utilizando Emotion

A biblioteca Emotion é uma biblioteca de estilos para o React que permite escrever estilos CSS em JavaScript. Ela é uma alternativa para outras bibliotecas de estilos populares, como o Styled Components e o CSS Modules.

Com o Emotion, você pode escrever seus estilos diretamente em seu arquivo JavaScript, o que torna o código mais fácil de gerenciar e permite que você tenha uma maior flexibilidade e controle sobre seus estilos. Além disso, a biblioteca Emotion é altamente performática e fornece recursos adicionais para otimizar o desempenho de seus estilos.

Uma das razões para usar Emotion seria devido a suas vantagens em relação com outras bibliotecas como:

1. Escrita de estilos em JavaScript

Ao escrever estilos em JavaScript, você pode usar as funcionalidades do próprio JavaScript para criar estilos dinâmicos e reutilizáveis.

1. Melhoria do desempenho

Emotion usa uma técnica chamada de "estilos dinâmicos" que ajuda a melhorar o desempenho de seus estilos. Com estilos dinâmicos, a biblioteca mantém apenas um único estilo CSS e aplica as propriedades dinâmicas necessárias por meio de JavaScript. Isso ajuda a reduzir a quantidade de código CSS que precisa ser enviado ao navegador, o que pode melhorar significativamente o desempenho do seu aplicativo.

1. Integração fácil com outras bibliotecas

A biblioteca Emotion é compatível com Redux e React Router podendo integrar ela a seu projeto pessoal.

Vale ressaltar que sua forma de sintaxe lembra bastante outra biblioteca conhecida, a chamada Styled Component. Embora as duas sejam bem diferentes: Emotion é uma ótima biblioteca de CSS para JS. Por outro lado, para opções de estilo mais exclusivas e complexas, os Styled-Components podem ser o melhor caminho a seguir.

Vejamos um exemplo do Emotion em ação estilizando alguns componentes:

import { css } from '@emotion/react'

const buttonStyles = css`
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`

function Button() {
  return <button css={buttonStyles}>Clique aqui</button>
}

No caso acima é passo um tipo de estilização para o botão. Conseguimos ver algumas diferenças com o Styled-Component pois ele importa o css de @emotion/react enquanto a outra biblioteca o styled da biblioteca baixada.

Com isso conseguimos ver o que é Emotion, seu uso e até algumas diferenças com outras bibliotecas, sendo útil para otimização e facilidade de sua aplicação.