Estilizando uma aplicação React com Stitches
Stitches é uma biblioteca CSS-in-JS moderna que fornece uma maneira poderosa e flexível de estilizar seus aplicativos React. Ela oferece uma abordagem única de estilo que combina as melhores partes de CSS e JavaScript, permitindo criar estilos dinâmicos facilmente.
Configurando Stitches
Utilizar a biblioteca Stitches para estilizar um aplicativo React é comparável a empregar a biblioteca styled-components, pois ambas são soluções CSS-in-JavaScript que permitem a criação de estilos por meio de código JavaScript.
Para estilizar um aplicativo React, é necessário primeiro instalar e configurar a biblioteca Stitches. O processo de instalação pode ser executado através do terminal, executando o seguinte comando utilizando o npm:
npm install @stitches/react
Em alternativa, pode optar-se por instalar a biblioteca utilizando o Yarn, executando o seguinte comando:
yarn add @stitches/react
Após a instalação da biblioteca “stitches”, pode-se começar a refinar a estética de seu aplicativo React.
Criando componentes estilizados
Para gerar elementos adornados, o Stitches oferece um método de estilização conhecido como função “styled”. Esta abordagem inovadora funde a aplicação de princípios de design visual e a funcionalidade inerente dos componentes numa estrutura unificada.
A função styled aceita dois parâmetros; o parâmetro inicial é um componente de marcação ou JSX, e o parâmetro subsequente é um objeto que contém as especificações CSS necessárias para tornar esse componente visualmente atraente.
Certamente, aqui está um exemplo de criação de um componente de botão estilizado utilizando a função styled em TypeScript:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
});
O código fornecido gera um elemento Button com uma tonalidade de fundo sombria, um tom de texto suave, cantos arredondados e um amplo espaço em branco à volta do seu conteúdo. É importante notar que, quando se especificam estilos CSS utilizando JavaScript, é habitual utilizar a formatação camelCase em vez da notação kebab-case convencionalmente utilizada, uma vez que esta adere às convenções prevalecentes para a criação de estilos no contexto da linguagem.
Após a criação de um elemento de botão refinado, é possível introduzi-lo nos seus componentes React para integração em várias aplicações.
Por exemplo:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
O exemplo dado utiliza o componente Button dentro de um componente App .O botão estará em conformidade com os estilos prescritos pela função styled , resultando em uma aparência visual como a seguinte:
A função styled permite a inclusão de estilos CSS aninhados através da sua sintaxe, que se assemelha muito à da linguagem de extensão Sass/Scss. Esta funcionalidade permite aos utilizadores organizarem melhor os seus estilos, melhorando a legibilidade do seu código.
Utilizando uma abordagem de estilo aninhado, considere a seguinte ilustração:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
O código fornecido emprega folhas de estilo em cascata (CSS) anexas e uma pseudo-classe para especificar a aparência do elemento Button. Ao colocar o cursor sobre o botão, o seletor condicional &:hover modifica a cor de fundo, bem como a cor do texto do referido elemento.
Estilizando com a função CSS
A biblioteca Stitches fornece um método alternativo para aqueles que podem sentir desconforto ao criar componentes estilizados através da implementação da função CSS. Esta função é capaz de gerar nomes de classes que facilitam o processo de estilização, aceitando um objeto JavaScript que contém apenas especificações de propriedades CSS como entrada.
A incorporação do estilo CSS nesta aplicação JavaScript pode ser conseguida através da utilização da função css , que permite a implementação de estilos personalizados para melhorar o aspeto visual e a experiência do utilizador dos componentes.
import React from "react";
import { css } from "@stitches/react";
const buttonStyle = css({
padding: "0.7rem 0.8rem",
borderRadius: "12px",
backgroundColor: "#333333",
color: "#e2e2e2",
fontFamily: "cursive",
border: "none",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
});
function App() {
return (
<>
<button className={buttonStyle()}>Click Me</button>
</>
);
}
export default App;
A camada de apresentação utiliza uma série de regras e directrizes estilísticas para visualizar a interatividade dos elementos da aplicação. Estas directrizes estão encapsuladas no objeto buttonStyles , onde definem vários aspectos como a cor, o tamanho, o espaçamento, o alinhamento e outras propriedades de design que contribuem para criar uma interface de utilizador intuitiva e visualmente apelativa. Ao empregar estes parâmetros de estilo, o sistema garante que cada elemento está em conformidade com uma linguagem visual uniforme, melhorando a consistência geral e a usabilidade em diferentes componentes e contextos.
Criando estilos globais
Utilizando a biblioteca Stitches, é possível estabelecer motivos de design universalmente aplicáveis em todo o aplicativo baseado em React empregando a função globalCss. Essa função constrói e implementa elementos estilísticos difundidos que imbuem um tema visual consistente em todos os componentes do aplicativo.
Depois de estabelecer os princípios de design universal utilizando globalCSS , é essencial implementar estas directrizes em toda a aplicação, chamando a respectiva função dentro do componente da aplicação escolhida. Isto irá garantir que todos os elementos aderem à linguagem visual coesa e à experiência do utilizador que criou cuidadosamente.
Por exemplo:
import React from "react";
import { globalCss } from "@stitches/react";
const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
function App() {
globalStyles();
return <></>;
}
export default App;
O excerto de código fornecido demonstra a aplicação da função globalCss , que é utilizada para definir as propriedades estilísticas associadas ao elemento HTML body . Especificamente, esta invocação particular da função globalCss estabelece um azul-acinzentado claro (#f2f2f2) como cor de fundo e um tom de cinzento mais escuro (#333333) como cor de texto para o referido elemento.
Criando estilos dinâmicos
A biblioteca Stitches oferece um recurso impressionante conhecido como criação de estilos dinâmicos, que permite a geração de estilos dependentes de adereços React utilizando a chave variants . Esta chave serve como uma propriedade para as funções CSS e de estilo, permitindo a criação de inúmeras variações dos componentes.
Por exemplo:
import { styled } from "@stitches/react";
export const Button = styled("button", {
padding: "0.7rem 0.8rem",
borderRadius: "12px",
fontFamily: "cursive",
border: "none",
variants: {
color: {
black: {
backgroundColor: "#333333",
color: "#e2e2e2",
"&:hover": {
backgroundColor: "#e2e2e2",
color: "#333333",
},
},
gray: {
backgroundColor: "#e2e2e2",
color: "#333333",
"&:hover": {
backgroundColor: "#333333",
color: "#e2e2e2",
},
},
},
},
});
O trecho de código fornecido gera um elemento personalizado Button com uma tonalidade distinta derivada de uma propriedade de cor especificada. Após a criação, este componente Button visualmente impressionante e versátil está pronto para ser integrado em várias aplicações.
Por exemplo:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button color="gray">Click Me</Button>
<Button color="black">Click Me</Button>
</>
);
}
export default App;
Ao renderizar a aplicação supramencionada, esta deve apresentar uma interface de utilizador com dois elementos visuais semelhantes à representação gráfica anexa.
Criação de tokens de tema
A biblioteca Stitches permite aos programadores estabelecer uma coleção de elementos de design conhecidos como “tokens de design”, que englobam várias propriedades visuais da sua interface de utilizador, incluindo esquemas de cor, tipos de letra, espaçamento de caracteres e outros atributos gráficos. Ao implementar estes tokens, é possível assegurar a uniformidade em toda a aplicação, facilitando ao mesmo tempo os ajustes ao seu aspeto geral.
Para gerar estes símbolos temáticos, utilize a função createStitches disponível na biblioteca stitches .Esta função permite a personalização do comportamento da biblioteca e deve ser invocada dentro de um ficheiro ./stitches.config.ts ou ./stitches.config.js .
Aqui está uma ilustração que demonstra o processo de geração de um token de tema, que pode ser utilizado em várias aplicações, como processamento de linguagem natural e análise de sentimentos:
import { createStitches } from "@stitches/react";
export const { styled, css } = createStitches({
theme: {
colors: {
gray: "#e2e2e2",
black: "#333333",
},
space: {
1: "5px",
2: "10px",
3: "15px",
},
fontSizes: {
1: "12px",
2: "13px",
3: "15px",
},
},
});
Após a definição dos seus tokens de tema, a sua utilização é agora viável no contexto do estilo do seu componente.
import { styled } from "../stitches.config.js";
export const Button = styled("button", {
padding: "$1 $3",
borderRadius: "12px",
fontSize: "$1",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
O código acima mencionado emprega os símbolos de cor $gray e $black para controlar as cores do fundo e do conteúdo textual do botão, para além de utilizar os símbolos de espaçamento $1 e $3 para determinar o preenchimento do botão, enquanto confia na variável de tamanho do tipo de letra $1 para estabelecer o tamanho do tipo de letra do botão.
Estilização eficiente com Stitches
Stitches é uma biblioteca altamente capaz que oferece uma solução robusta e adaptável para aprimorar a aparência visual dos aplicativos React. Oferecendo recursos avançados, como componentes estilizados, estilos ajustáveis e CSS global, ela facilita a criação de elementos de design complexos com facilidade. Independentemente de estar a construir um projeto React pequeno ou extenso, o Stitches apresenta-se como uma opção formidável quando se consideram as preferências estilísticas.
Um excelente substituto para a biblioteca Stitches é a biblioteca Emotion, que é uma solução CSS-in-JS amplamente utilizada que permite a criação de estilos usando JavaScript. A sua simplicidade e versatilidade tornam-na uma escolha atractiva para a criação de elementos de design impressionantes em aplicações.