Diseñar una aplicación React con puntadas

Stitches es una biblioteca CSS-in-JS moderna que proporciona una forma poderosa y flexible de diseñar sus aplicaciones React. Ofrece un enfoque único de estilo que combina las mejores partes de CSS y JavaScript, lo que le permite crear estilos dinámicos fácilmente.

MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO

Configurar puntadas

Diseñe su aplicación React usando puntadas es parecido a usando la biblioteca de componentes con estilo . Teniendo en cuenta que los puntos y componentes con estilo son ambas bibliotecas CSS-in-JS que le permiten escribir estilos en JavaScript.

Antes de diseñar su aplicación React, debe instalar y configurar la biblioteca de puntadas. Para instalar la biblioteca usando npm, ejecute el siguiente comando en su terminal:

npm install @stitches/react

Alternativamente, puedes instalar la biblioteca usando hilo con este comando:

yarn add @stitches/react

Una vez que haya instalado la biblioteca de puntadas, puede comenzar a diseñar su aplicación React.

Crear componentes con estilo

Para crear componentes con estilo, la biblioteca de puntadas proporciona una estilo función. La función con estilo le permite crear componentes con estilo que combinan estilos CSS y la lógica de los componentes.

El estilo La función toma dos argumentos. El primero es un elemento HTML/JSX y el segundo es un objeto que contiene las propiedades CSS para darle estilo.

A continuación se explica cómo puede crear un componente de botón con estilo utilizando el estilo función:

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", 
});

El bloque de código anterior crea un Botón componente con un color de fondo oscuro, un color de texto gris, un radio de borde y algo de relleno. Tenga en cuenta que escribe las propiedades CSS en camelCase, no en kebab-case. Esto se debe a que camelCase es una forma más común de escribir propiedades CSS en JavaScript.

Una vez que haya creado el componente del botón con estilo, puede importarlo a sus componentes de React y usarlo.

Por ejemplo:

import React from "react"; 
import { Button } from "./Button"; 
 
function App() { 
  return ( 
    <> 
      <Button>Click Me</Button> 
    </> 
  ); 
} 
 
export default App;

Este ejemplo utiliza el Botón componente en un Aplicación componente. El botón adoptará los estilos que le pasaste al estilo función, haciendo que se vea así:

Un botón con un fondo negro con la etiqueta 'Haz clic en mí'.

El estilo La función también le permite anidar estilos CSS, con una sintaxis similar a el idioma de extensión SASS/SCSS . Esto le facilita la organización de sus estilos y hace que su código sea más legible.

A continuación se muestra un ejemplo que utiliza la técnica de estilos anidados:

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", 
  }, 
});

Este código utiliza estilos CSS anidados y una pseudoclase para apuntar al Botón componente. Cuando pasa el cursor sobre el botón, el selector anidado &:flotar cambia los colores de fondo y texto del botón.

Aplicar estilo con la función CSS

Si no se siente cómodo creando componentes con estilo, el puntadas La biblioteca ofrece la CSS función, que puede generar nombres de clases para diseñar sus componentes. El CSS La función toma un objeto JavaScript con propiedades CSS como único argumento.

Así es como puedes diseñar tus componentes usando el CSS función:

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;

El CSS La función crea los estilos CSS para el botón que este código luego asigna al botónEstilo variable. El botónEstilo La función genera un nombre de clase para los estilos definidos, que luego se pasa al nombre de la clase apoyo de la botón componente.

¿Tu teléfono te escucha?

Crear estilos globales

Utilizando el puntadas biblioteca, también puede definir estilos globales para su aplicación utilizando el CSS global función. La función globalCss crea y aplica estilos globales a su aplicación React.

Después de definir sus estilos globales usando CSS global , llama a la función en tu aplicación componente para aplicar los estilos a su aplicación.

Por ejemplo:

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

Este ejemplo define los estilos para el cuerpo elemento usando el CSS global función. La llamada establece el color de fondo en #f2f2f2 y el color del texto para #333333 .

Crear estilos dinámicos

Una de las características más poderosas del puntadas La biblioteca es su capacidad para crear estilos dinámicos. Puedes crear estilos que dependan de Reaccionar accesorios con el variantes llave. El variantes La clave es una propiedad tanto de la CSS y estilo funciones. Puede crear tantas variantes de su componente como desee.

Por ejemplo:

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", 
        }, 
      }, 
    }, 
  }, 
});

Este código crea un Botón componente con un color variante. El color La variante le permite cambiar el color del botón según un color apuntalar. Una vez que haya creado el Botón componente, puede usarlo en su aplicación.

Por ejemplo:

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;

Una vez que renderice esta aplicación, aparecerán dos botones en su interfaz. Los botones se verán como la imagen de abajo.

Dos botones, uno encima del otro. El de arriba tiene un fondo gris claro y el de abajo tiene un fondo negro.

Crear tokens temáticos

El puntadas La biblioteca le permite crear un conjunto de tokens de diseño que definen los aspectos visuales de su interfaz de usuario, como colores, tipografía, espaciado y más. Estos tokens ayudan a mantener la coherencia y hacen que la actualización de los estilos generales de su aplicación parezca fácil.

Para crear estos tokens temáticos, utilice el crearPuntadas función. El crearPuntadas La función de la biblioteca de puntadas le permite configurar la biblioteca. Asegúrese de utilizar el crearPuntadas funcionar en un puntadas.config.ts archivo o un puntadas.config.js archivo.

A continuación se muestra un ejemplo de cómo crear un token de tema:

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", 
    }, 
  }, 
});

Ahora que ha definido los tokens de su tema, puede usarlos en los estilos de sus componentes.

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

El bloque de código de arriba usa los tokens de color. $gris y $negro para el color de fondo y del texto del botón. También utiliza las fichas de espacio. y para establecer el relleno del botón y la variable de tamaño de fuente para establecer el tamaño de fuente del botón.

Peinado eficiente con puntadas

La biblioteca de puntadas proporciona una forma poderosa y flexible de diseñar sus aplicaciones React. Con funciones como componentes con estilos, estilos dinámicos y CSS global, puede crear fácilmente diseños complejos. Ya sea que esté creando una aplicación React pequeña o grande, los puntos pueden ser una excelente opción para diseñar.

Una gran alternativa a la biblioteca de puntadas es la biblioteca de emociones. Emotion es una biblioteca CSS-in-JS popular que te permite escribir estilos en JavaScript. Es fácil de usar y ofrece muchas funciones para crear excelentes estilos para su aplicación.