En este tutorial, exploraremos cómo usar componentes con estilo en una aplicación React para crear estilos modulares, reutilizables y dinámicos. Comenzaremos con los aspectos básicos de la instalación y el uso del styled-componentspaquete y luego continuaremos con la creación de componentes con estilos personalizados con estilos dinámicos.

requisitos previos

Antes de comenzar, asegúrese de tener instalado lo siguiente en su sistema:

• Node.js y npm (o hilo)
• Un editor de código (por ejemplo, VS Code, Sublime Text)

Primero, instalemos el styled-componentspaquete ejecutando el siguiente comando en su terminal:

npm install styled-components

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #008CBA;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <StyledButton>Click me</StyledButton>
    </div>
  );
}

export default App;

Creación de estilos dinámicos con accesorios

Uno de los beneficios de usar styled-componentses la capacidad de crear estilos dinámicos basados ​​en accesorios. Modifiquemos nuestro StyledButtoncomponente para que tenga diferentes colores de fondo basados ​​en un primaryaccesorio.

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#008CBA' : '#E6E6E6'};
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  border: none;
`;

<StyledButton>Default button</StyledButton>
<StyledButton primary>Primary button</StyledButton>

Otro beneficio de usar styled-componentses la capacidad de crear componentes de estilo reutilizables. Vamos a crear un Cardcomponente de estilo personalizado que podamos reutilizar en toda nuestra aplicación.

const Card = styled.div`
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 1em;
  border-radius: 3px;
`;

<Card>
  <h2>Card title</h2>
  <p>Card content</p>
</Card>

styled-componentsproporciona una forma poderosa y flexible de diseñar sus componentes React. Ofrecen varios beneficios, que incluyen modularidad, estilos de ámbito, estilos dinámicos y legibilidad mejorada. En este tutorial, hemos explorado los conceptos básicos del uso styled-components, la creación de estilos dinámicos con accesorios y la creación de componentes con estilo reutilizables. Con este conocimiento, puede comenzar a usar styled-componentsen sus propias aplicaciones React y aprovechar sus beneficios.