Texto de: Letícia Garcez
Introdução
Um dos desafios que enfrentamos na utilização de frameworks de desenvolvimento baseados em componentes é a estilização desses componentes. Existem muitas alternativas para aplicar estilizações aos componentes e neste artigo, iremos falar sobre uma delas: os styled components, ou componentes estilizados em tradução livre, que permitem a criação de componentes HTML com formatações personalizadas.
O que são styled components?
Os styled componentes são uma forma de estilização de componentes que se tornou popular no mundo do React. Basicamente, utilizando essa tecnologia, podemos criar uma espécie de nova versão de uma tag HTML, mas já com uma formatação especificada.
Preparando o projeto
Para ilustrar melhor o uso dos styled components, eu criei um projeto Next.js com o comando npx create-next-app styled e adicionei os styled componentes neste projeto com o comando npm i styled-components. Depois disso, removi a página que estava sendo gerada pelo documento page.tsx que se encontra na pasta src e deixei o arquivo como na imagem abaixo. O erro que está aparecendo na imagem é esperado e irá desaparecer conforme o código for digitado.
Utilizando styled components
Para criarmos nossos próprios componentes, inicialmente precisamos importar a biblioteca colocando import styled from “styled-components” no topo do arquivo. Também será necessário adicionar a linha "use client" no topo do arquivo caso você esteja utilizando uma versão mais atual do Next.js. Depois disso, podemos utilizar a variável styled para a criação dos nossos componentes.
A criação dos componentes é feita utilizando a sintaxe de tagged template literals, que é uma forma de invocação de funções não muito utilizada. Para criar o componente, precisamos utilizar a variável styled, seguida de um ponto, o nome da tag onde queremos aplicar a formação e uma template string onde são definidas as propriedades CSS que representam a formatação desejada para aquele elemento.
const MeuLI = styled.li`
background-color: red;
padding: 5px;
color: white;
margin: 5px;
width: 120px;
`
O código acima cria uma nova tag li com a formatação definida na template string. Sendo assim, podemos substituir as tags li da aplicação pela tag formatada:
"use client"
import styled from "styled-components";
export default function Home() {
const MeuLI = styled.li`
background-color: red;
padding: 5px;
color: white;
margin: 5px;
width: 120px;
`;
return (
<div>
<h1>Título da aplicação</h1>
<h3>Subtítulo da aplicação</h3>
<ol>
<MeuLI>Item 1</MeuLI>
<MeuLI>Item 2</MeuLI>
<MeuLI>Item 3</MeuLI>
<MeuLI>Item 4</MeuLI>
</ol>
</div>
);
}
E assim temos o nosso componente estilizado, que pode ser reutilizado em diferentes partes da aplicação. Para manter o exemplo desse artigo simples, eu desenvolvi o componente diretamente no arquivo principal, mas nada impede que você desenvolva esse componente estilizado em outro arquivo e o utilize como outro componente qualquer.
Usando propriedades nos componentes estilizados
Também podemos utilizar os styled componentes para implementar lógicas de formatação baseada em propriedades passadas para o componente personalizado. Para isso, logo após a definição da tag, podemos utilizar a sintaxe do generics para especificar os tipos de parâmetros que serão passados para o componente e seus tipos. A convenção atual é que esses parâmetros passados para o componente comecem com o símbolo $.
Depois disso, dentro da definição do componente, criamos uma função que receberá como parâmetro as variáveis definidas como parâmetro dentro do generics, e então podemos criar as formatações a partir deles. Estas formatações também serão feitas utilizando a sintaxe de tagged template literals, porém ao invés da função styled, utilizaremos a função css que pode ser importada com o comando import {css} from “styled-components”.
Um exemplo de definição deste tipo de função pode ser visto abaixo:
const MinhaDiv = styled.div<{$col:boolean}>`
display: flex;
justify-content: center;
align-items: center;
${($col: any) => {
return $col
? css`
flex-direction: column;
`
: css`
flex-direction: row;
`;
}}
`;
Aqui é importante esclarecer que a propriedade flex-direction será adicionada aos estilos conforme o valor a propriedade $col passada para o componente. O código atualizado e a formatação gerada por ele podem ser vistas abaixo.
"use client";
import styled from "styled-components";
import { css } from "styled-components";
export default function Home() {
const MeuLI = styled.li`
background-color: red;
padding: 5px;
color: white;
margin: 5px;
width: 120px;
`;
const MinhaDiv = styled.div<{ $col: boolean }>`
display: flex;
justify-content: center;
align-items: center;
${($col: any) => {
return $col
? css`
flex-direction: column;
`
: css`
flex-direction: row;
`;
}}
`;
return (
<MinhaDiv>
<h1>Título da aplicação</h1>
<h3>Subtítulo da aplicação</h3>
<ol>
<MeuLI>Item 1</MeuLI>
<MeuLI>Item 2</MeuLI>
<MeuLI>Item 3</MeuLI>
<MeuLI>Item 4</MeuLI>
</ol>
</MinhaDiv>
);
}
Adicionando a propriedade col em MinhaDiv, como mostrado abaixo, conseguimos facilmente modificar a visualização da aplicação.
return (
<MinhaDiv $col>
<h1>Título da aplicação</h1>
<h3>Subtítulo da aplicação</h3>
<ol>
<MeuLI>Item 1</MeuLI>
<MeuLI>Item 2</MeuLI>
<MeuLI>Item 3</MeuLI>
<MeuLI>Item 4</MeuLI>
</ol>
</MinhaDiv>
);
Considerações finais
Neste artigo conhecemos os styled componets e vimos o básico sobre como criar componentes estilizados utilizando esta tecnologia.
