Estilizando um aplicativo React com pontos

Stitches é uma biblioteca CSS-in-JS moderna que fornece uma maneira poderosa e flexível de estilizar seus aplicativos React. Ele oferece uma abordagem única de estilo que combina as melhores partes de CSS e JavaScript, permitindo criar estilos dinâmicos facilmente.

Configurando pontos

Estilizando seu aplicativo React usando pontos é similar a usando a biblioteca de componentes estilizados. Considerando que pontos e componentes estilizados são bibliotecas CSS-in-JS que permitem escrever estilos em JavaScript.

Antes de estilizar seu aplicativo React, você deve instalar e configurar a biblioteca de pontos. Para instalar a biblioteca usando npm, execute o seguinte comando em seu terminal:

npm install @stitches/react

Alternativamente, você pode instalar a biblioteca usando o fio com este comando:

yarn add @stitches/react

Depois de instalar a biblioteca de pontos, você pode começar a estilizar seu aplicativo React.

Criando componentes estilizados

Para criar componentes estilizados, a biblioteca de pontos fornece uma estilizado função. A função estilizada permite criar componentes estilizados que combinam estilos CSS e a lógica dos componentes.

O estilizado função leva dois argumentos. O primeiro é um elemento HTML/JSX e o segundo é um objeto que contém as propriedades CSS para estilizá-lo.

Veja como você pode criar um componente de botão estilizado usando o estilizado função:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
});

O bloco de código acima cria um Botão componente com uma cor de fundo escura, cor de texto cinza, um raio de borda e algum preenchimento. Observe que você escreve as propriedades CSS em camelCase, não em kebab-case. Isso ocorre porque camelCase é uma forma mais comum de escrever propriedades CSS em JavaScript.

Depois de criar o componente do botão estilizado, você pode importá-lo para os componentes do React e usá-lo.

Por exemplo:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
Click Me</Button>
 </>
 );
}
exportdefault App;

Este exemplo usa o Botão componente em um Aplicativo componente. O botão adotará os estilos que você passou para o estilizado função, ficando assim:

O estilizado função também permite aninhar estilos CSS, com uma sintaxe semelhante a a linguagem de extensão SASS/SCSS. Isso torna mais fácil organizar seus estilos e tornar seu código mais legível.

Aqui está um exemplo usando a técnica de estilos aninhados:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});

Este código usa estilos CSS aninhados e uma pseudoclasse para direcionar o Botão componente. Quando você passa o mouse sobre o botão, o seletor aninhado &:flutuar altera o plano de fundo e as cores do texto do botão.

Estilizando com a função CSS

Se você não se sentir confortável em criar componentes estilizados, o pontos biblioteca oferece o css função, que pode gerar nomes de classes para estilizar seus componentes. O css função usa um objeto JavaScript com propriedades CSS como seu único argumento.

Veja como você pode estilizar seus componentes usando o css função:

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",
 },
});
functionApp() {
return (
 <>
Click Me</button>
 </>
 );
}
exportdefault App;

O css função cria os estilos CSS para o botão que este código atribui ao estilo de botão variável. O estilo de botão função gera um nome de classe para os estilos definidos, que é então passado para o nome da classe suporte do botão componente.

Criando estilos globais

Usando o pontos biblioteca, você também pode definir estilos globais para seu aplicativo usando o CSS global função. A função globalCss cria e aplica estilos globais ao seu aplicativo React.

Depois de definir seus estilos globais usando CSS global, chame a função no seu aplicativo componente para aplicar os estilos ao seu aplicativo.

Por exemplo:

import React from"react";
import { globalCss } from"@stitches/react";
const globalStyles = globalCss({
 body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
functionApp() {
 globalStyles();
return<>;
}
exportdefault App;

Este exemplo define os estilos para o corpo elemento usando o CSS global função. A chamada define a cor de fundo como #f2f2f2 e a cor do texto para #333333.

Criando estilos dinâmicos

Um dos recursos mais poderosos do pontos biblioteca é sua capacidade de criar estilos dinâmicos. Você pode criar estilos que dependem Adereços de reação com o variantes chave. O variantes key é uma propriedade de ambos css e estilizado funções. Você pode criar quantas variantes do seu componente desejar.

Por exemplo:

import { styled } from"@stitches/react";
exportconst 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",
 },
 },
 },
 },
});

Este código cria um Botão componente com um cor variante. O cor variante permite que você altere a cor do botão com base em um cor suporte. Depois de criar o Botão componente, você pode usá-lo em seu aplicativo.

Por exemplo:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
"gray">Click Me</Button>
"black">Click Me</Button>
 </>
 );
}
exportdefault App;

Depois de renderizar este aplicativo, dois botões serão exibidos em sua interface. Os botões ficarão como na imagem abaixo.

Criando Tokens de Tema

O pontos biblioteca permite que você crie um conjunto de tokens de design que definem os aspectos visuais de sua UI, como cores, tipografia, espaçamento e muito mais. Esses tokens ajudam a manter a consistência e fazem com que a atualização dos estilos gerais do seu aplicativo pareça fácil.

Para criar esses tokens de tema, use o criar pontos função. O criar pontos A função da biblioteca de pontos permite configurar a biblioteca. Certifique-se de usar o criar pontos funcionar em um pontos.config.ts arquivo ou um pontos.config.js arquivo.

Aqui está um exemplo de como criar um token de tema:

import { createStitches } from"@stitches/react";
exportconst { styled, css } = createStitches({
 theme: {
 colors: {
 gray: "#e2e2e2",
 black: "#333333",
 },
 space: {
1: "5px",
2: "10px",
3: "15px",
 },
 fontSizes: {
1: "12px",
2: "13px",
3: "15px",
 },
 },
});

Agora que você definiu seus tokens de tema, você pode usá-los em seus estilos de componentes.

import { styled } from"../stitches.config.js";
exportconst Button = styled("button", {
 padding: "$1 $3",
 borderRadius: "12px",
 fontSize: "$1",
 border: "none",
 color: '$black',
 backgroundColor: '$gray',
});

O bloco de código acima usa os tokens coloridos $cinza e $preto para o plano de fundo e a cor do texto do botão. Ele também usa os tokens de espaço $1 e $3 para definir o preenchimento do botão e a variável de tamanho da fonte $1 para definir o tamanho da fonte do botão.

Estilo eficiente com pontos

A biblioteca de pontos fornece uma maneira poderosa e flexível de estilizar seus aplicativos React. Com recursos como componentes estilizados, estilos dinâmicos e CSS global, você pode criar facilmente designs complexos. Esteja você construindo um aplicativo React pequeno ou grande, os pontos podem ser uma excelente escolha para estilização.

Uma ótima alternativa à biblioteca de pontos é a biblioteca de emoções. Emotion é uma biblioteca CSS-in-JS popular que permite escrever estilos em JavaScript. É fácil de usar e oferece muitos recursos para criar ótimos estilos para sua aplicação.