A biblioteca Emotion simplifica o uso de CSS no React e também adiciona alguns recursos úteis de sintaxe.

Estilizar um aplicativo React pode ser desafiador, especialmente se você deseja manter seus estilos organizados e fáceis de manter. Para ajudar a simplificar esse processo, a biblioteca Emotion fornece uma abstração de alto nível sobre CSS.

O que é emoção?

Emotion é uma biblioteca para estilizar aplicativos React que fornece uma maneira simples e eficiente de gerenciar seus estilos. Ele permite que você escreva CSS em JavaScript e fornece uma API flexível para estilizar seus componentes.

Um dos principais benefícios de usar o Emotion para estilizar seu aplicativo React é que ele fornece uma maneira mais eficiente de gerenciar seus estilos. Por exemplo, você pode usar nomes de classe idênticos em vários componentes sem o risco de nomear colisões que surgirem ao trabalhar com CSS/SASS.

A biblioteca Emotion aplica seus estilos apenas aos componentes que os usam, e não à página inteira. Isso pode ajudar a evitar conflitos com outros estilos na página e tornar seu código mais modular e reutilizável.

Como instalar a emoção

Para adicionar a biblioteca Emotion ao seu aplicativo React, execute o seguinte comando de terminal:

npm install --save @emotion/react

A biblioteca Emotion agora deve estar instalada em seu projeto e pronta para ser usada para estilizar seu aplicativo React.

Estilizando usando o Prop css da Emotion

Depois de instalar a biblioteca Emotion, você poderá usar o CSS prop para estilizar seu aplicativo React. O CSS prop é semelhante ao estilo prop, pois você pode passar estilos para ele na forma de strings ou objetos JavaScript regulares.

Para estilizar seu aplicativo usando o CSS prop, você deve importá-lo do @emoção/reação biblioteca e defina seus estilos:

/** @jsxImportSource @emoção/reagir */
importar Reagir de'reagir';
importar {css} de'@emoção/reação';
funçãoAplicativo() {
retornar (
 preenchimento: 0.5rem 1rem;
 borda: nenhum;
 família da fonte: cursiva;
 raio da borda: 12px;
 cor: #333333;
 cor de fundo: herdar;
 margin-block-start: 2rem;
 final do bloco de margem: 2rem;
`}>
 Clique em mim
 </button>
 )
}


exportarpadrão Aplicativo;

A primeira linha de código, /** @jsxImportSource @emotion/react */, é um comentário específico que você deve adicionar ao arquivo JSX para indicar que a biblioteca Emotion deve ser usada como o pragma JSX para esse arquivo.

No JSX, um pragma é uma função que transforma a sintaxe JSX em JavaScript regular. Por padrão, o React usa o React.createElement funcionar como o pragma JSX. No entanto, com o @jsxImportSource comentário, você pode especificar um pragma diferente.

Neste caso, o @emoção/reação pragma diz ao JSX para usar o jsx função da biblioteca Emotion para transformar o código JSX. Ao adicionar o comentário pragma a um arquivo JSX, você pode usar os recursos CSS-in-JS da biblioteca Emotion em seus componentes.

O componente de botão renderiza um botão com algum estilo personalizado. Aqui o CSS prop adiciona o estilo personalizado ao elemento de botão.

O CSS prop também suporta estilos aninhados. O estilo aninhado permite escrever estilos aninhados uns nos outros.

Por exemplo:

/** @jsxImportSource @emoção/reagir */
importar Reagir de'reagir';
importar {css} de'@emoção/reação';
funçãoAplicativo() {
retornar (
 preenchimento: 0.5rem 1rem;
 borda: nenhum;
 família da fonte: cursiva;
 raio da borda: 12px;
 cor: #333333;
 cor de fundo: herdar;
 margin-block-start: 2rem;
 final do bloco de margem: 2rem;


 &:flutuar{
 cor: #e2e2e2;
 cor de fundo: #333333;
 }
`}>
 Clique em mim
 </button>
 )
}
exportarpadrão Aplicativo;

Neste exemplo, a declaração do estilo hover usa o recurso de estilo aninhado do CSS suporte. O plano de fundo e a cor da fonte no bloco de código acima serão alterados sempre que você passar o mouse sobre o botão.

Passando estilos de objeto para o CSS Prop

O CSS prop também aceita estilos de objeto JavaScript regulares. Ao estilizar vários componentes, utilizar estilos de objeto permite que você reutilize estilos em seus componentes.

Para passar estilos de objeto para o CSS prop, defina os estilos como um objeto JavaScript e passe para o prop:

const estilo = {
 preenchimento: '0,5rem 1rem',
 fronteira: 'nenhum',
 família de fontes: 'cursiva',
 borderRadius: '12px',
 cor: '#333333',
 cor de fundo: 'herdar',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:flutuar': {
 cor: '#e2e2e2',
 cor de fundo: '#333333',
 }
}
retornar (
"aplicativo">

Observe que os nomes das propriedades CSS são camelCased em vez de hifenizados. Isso ocorre porque os estilos são definidos como objetos JavaScript, que usam convenções de nomenclatura camelCase.

Estilizando usando os componentes estilizados

A biblioteca Emotion também faz uso de componentes estilizados ao estilizar aplicativos React. Usando componentes estilizados é semelhante aos componentes do React, exceto pelo fato de conterem estilos prontos para uso. Para criar componentes estilizados, você usará o estilizado função.

O estilizado A função permite criar componentes com estilo reutilizáveis. Para usar o estilizado função, importe-a do emoção/estilo biblioteca.

Para obter o @emoção/estilo biblioteca em seu aplicativo, você irá instalá-la em seu projeto. Você pode fazer isso executando o seguinte comando no terminal do seu projeto:

npm install @emotion/estilo

Depois de instalar o @emoção/estilo biblioteca, importe o estilizado função e definir seus estilos:

importar estilizado de"@emoção/estilo";
const Button = style.button({
 preenchimento: '0,5rem 1rem',
 fronteira: 'nenhum',
 família de fontes: 'cursiva',
 borderRadius: '12px',
 cor: '#333333',
 cor de fundo: 'herdar',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',


'&:flutuar': {
 cor: '#e2e2e2',
 cor de fundo: '#333333',
 }
})
exportarpadrão Botão;

No bloco de código acima, um componente com estilo Botão é criado. Você pode usar este Button em seu aplicativo React como qualquer outro componente React.

Igual a:

importar Reagir de'reagir';
importar Botão de'./Botão';
funçãoAplicativo() {
retornar (








exportarpadrão Aplicativo;

Renderizando o Aplicativo componente exibirá um botão com os estilos definidos no Botão componente em sua tela.

O estilizado função também aceita estilos de string. Parece diferente da abordagem de estilos de objeto, mas funciona de maneira semelhante.

importar estilizado de"@emoção/estilo";
const Button = style.button`
 preenchimento: 0.5rem 1rem;
 borda: nenhum;
 família da fonte: cursiva;
 raio da borda: 12px;
 cor: #333333;
 cor de fundo: herdar;
 margin-block-start: 2rem;
 final do bloco de margem: 2rem;


 &:flutuar {
 cor: #e2e2e2;
 cor de fundo: #333333;
 }
`
exportarpadrão Botão;

Estilização eficiente com emoção

Emotion é uma biblioteca poderosa para estilizar componentes React que fornece uma maneira simples e eficiente de gerenciar seus estilos. Seja você iniciante ou um desenvolvedor experiente, o Emotion pode ajudar a simplificar o processo de estilizar seu aplicativo React e facilitar a manutenção e a escala do seu código.

Portanto, se você está procurando uma maneira mais eficiente e flexível de estilizar seus componentes React, considere o Emotion.