devArticlesia

Ejemplos de Componentes con Styled Components en React

devarticlesia's photo
devarticlesia
·

3 min read

Styled Components es una biblioteca de JavaScript que permite definir estilos para los componentes de React utilizando JavaScript y CSS. Con Styled Components, los estilos se definen dentro de los componentes y se integran directamente en el código del componente, lo que permite un mayor control y mejora la cohesión entre el estilo y la funcionalidad del componente.

¿Por qué usar Styled Components?

Hay varias razones por las que los desarrolladores recurren a Styled Components en sus proyectos de React:

  • Permite un mayor control sobre los estilos y una mejor integración con el componente.

  • Facilita la resolución de conflictos de estilos y la eliminación de estilos no deseados.

  • Proporciona una forma fácil y eficiente de crear componentes personalizados.

  • Permite la reutilización de estilos y la creación de temas y estilos globales.

Creación de un Componente con Styled Components

A continuación, se presenta un ejemplo de código para crear un componente de botón con Styled Components:

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

const Button = styled.button`
  background-color: palevioletred;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
`;

export default function App() {
  return (
    <Button>
      Botón
    </Button>
  );
}

Ejemplos de Componentes con Styled Components

A continuación, se presentan varios ejemplos de componentes creados con Styled Components:

Botón con estilo personalizado

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

const CustomButton = styled.button`
  background-color: palevioletred;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
`;

export default function CustomButtonExample() {
  return (
    <CustomButton>
      Botón con estilo personalizado
    </CustomButton>
  );
}

2. Tarjetas personalizadas

Otro componente común que podemos crear con Styled Components son las tarjetas personalizadas. Por ejemplo, podemos crear una tarjeta con un fondo gris y un borde redondeado.

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

const CustomCard = styled.div`
  background-color: lightgray;
  border-radius: 10px;
  padding: 20px;
`;

function App() {
  return (
    <div>
      <CustomCard>
        <h2>Título de la Tarjeta</h2>
        <p>Contenido de la Tarjeta</p>
      </CustomCard>
    </div>
  );
}

export default App;

3. Modales Personalizados con Styled Components

Los modales son una forma efectiva de proporcionar más información o una acción al usuario sin tener que redirigirlo a otra página o sección de la aplicación. Con Styled Components, podemos crear fácilmente modales personalizados para nuestra aplicación.

Para crear un modal personalizado, podemos usar el componente Modal proporcionado por React y estilizarlo con Styled Components. A continuación, presentamos un ejemplo de código de un modal personalizado que incluye un título, un mensaje y dos botones:

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

const ModalOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
`;

const ModalContainer = styled.div`
  background-color: white;
  border-radius: 5px;
  padding: 20px;
  max-width: 500px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
`;

const ModalTitle = styled.h2`
  font-size: 24px;
  margin-bottom: 20px;
`;

const ModalMessage = styled.p`
  font-size: 16px;
  margin-bottom: 20px;
`;

const ModalButtonContainer = styled.div`
  display: flex;
  justify-content: flex-end;
`;

const ModalButton = styled.button`
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  margin-left: 10px;
  background-color: ${props => (props.cancel ? "#F44336" : "#4CAF50")};
  color: white;
  cursor: pointer;
`;

const Modal = ({ title, message, onClose, onConfirm }) => (
  <ModalOverlay>
    <ModalContainer>
      <ModalTitle>{title}</ModalTitle>
      <ModalMessage>{message}</ModalMessage>
      <ModalButtonContainer>
        <ModalButton cancel onClick={onClose}>
          Cancelar
        </ModalButton>
        <ModalButton onClick={onConfirm}>Confirmar</ModalButton>
      </ModalButtonContainer>
    </ModalContainer>
  </ModalOverlay>
);

export default Modal;
Reactstyled-components