DEV Community

loading...
Cover image for Styled Components Basics (Spanish)

Styled Components Basics (Spanish)

alfredocu profile image Alfredo Carreón Urbano Updated on ・6 min read

Introducción.

Styled Components es una alternativa de mejorar CSS para diseñar componentes en React.

Y es que tiene bastantes ventajas para utilizar esta hermosa librería para diseñar nuestros componentes.

  • Sin errores al asignar nombres a nuestras clases CSS, esto gracias a que se generan nombres únicos, evitando sobrescribir alguna clase.

  • Eliminación de CSS no utilizable.

  • Mejora el mantenimiento, nunca tendrá que buscar en diferentes archivos para encontrar el estilo que afecta a su componente, por lo que el mantenimiento es muy fácil.

  • Sigue escribiendo CSS estándar y deje que el componente con estilos se encargue del resto.

  • Puede crear estilos de componentes globales sin problemas.

Estos son algunos beneficios, pero aún hay más.

Instalación.

La instalación es muy simple con el comando:

npm install --save styled-components
Enter fullscreen mode Exit fullscreen mode

Plugin.

Si tu entorno de trabajo es VSCode, te recomiendo instalar el siguiente plugin:

vscode-styled-components

Te ayuda a:

  • Resaltado de sintaxis para componentes con estilo en JavaScript y TypeScript.

  • CSS IntelliSense detallado mientras trabaja en cadenas con estilo.

  • Informe de error de sintaxis.

Antes de iniciar.

Puedes tener un componente así:

const Test = () => (
  <div className="container">
    <h1 className="title">Title</h1>
    <p className="description">Paragraphs</p>
  </div>
}
Enter fullscreen mode Exit fullscreen mode

Normalmente cuando trabajas con CSS puedes realizar algo como esto:

.container {
  padding: 10px;
  background-color: #0ac1a8;
  font-family: "Lato", sans-serif;
}

.title {
  margin: 1em 0 0 0;
  letter-spacing: 0.8px;
}

.description {
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

Y tener tus estilos y componente en archivos diferentes, pero con styled-components estos estilos se mantienen en el mismo archivo.

Importamos la librería.

Antes de iniciar debes de importar las librerías para iniciar a trabajar.

import React from "react";
import styled from "styled-components";
Enter fullscreen mode Exit fullscreen mode

Creando un componente de estilos.

Cuando está definiendo estilos, en realidad está creando componentes de React, el ejemplo anterior puedes transformarlo de esta manera:

const Test = () => (
  <Container>
    <Title>Title</Title>
    <Description>Paragraph</Description>
  </Container>
);

const Container = styled.div`
  padding: 10px;
  background-color: #0ac1a8;
  font-family: "Lato", sans-serif;
`;

const Title = styled.h1`
  margin: 1em 0 0 0;
  letter-spacing: 0.8px;
`;

const Description = styled.p`
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
`;
Enter fullscreen mode Exit fullscreen mode

Puedes observar que mantiene CSS normal, y cada uno de los componentes se comporta como una etiqueta HTML.

Si abres tú navegador en "inspeccionar elemento", podrás observar una estructura HTML normal y se genera nombres únicos para evitar sobrescribir cada una de las clases de CSS.

CSS esta definido de manera global en toda su aplicación y cuando está crece puede ser difícil de administrar, aumentando la posibilidad de tener conflictos de nombres de estilos, lo que resuelve styled-components al generar nombres únicos a las clases.

styled-component

Puedes crear componente con cualquier etiqueta HTML, img, p, h1, div, span, etc.

Módulos CSS.

Puedes hacer que CSS tome un comportamiento similar a Styled Components utilizando módulos CSS.

El CSS dentro de un módulo está disponible sólo para el componente que lo importó, y no tiene que preocuparse por los conflictos de nombres.

import styles from './styles.css'

const Test = () => (
  <div className={styles.container}>
    <p className={styles.paragraph}>Welcome!</p>
    <input
      className={styles.input}
      placeholder="user"
      type="text"
      inputColor="#20534c"
    />
    <input className={styles.input} placeholder="password" type="password" />
    <button className={styles.button} onClick={this.login}>
      Login
    </button>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Pero esto genera un código muy sucio, a comparación de Styled
Components.

const Test = () => (
  <Container>
    <Paragraph>Welcome!</Paragraph>
    <Input placeholder="user" type="text" inputColor="#20534c" />
    <Input placeholder="password" type="password" />
    <Button onClick={this.login}>Login</Button>
  </Container>
);
Enter fullscreen mode Exit fullscreen mode

Usando props (accesorios).

Puedes enviar props a tus componentes de estilo, para crear diferentes comportamientos gracias a las funciones interpoladas.

const Test = () => (
  <Container>
    <Button login color="white">
      Login
    </Button>
    <Button bold color="#0ac1a8">
      Register
    </Button>
  </Container>
);

const Container = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
`;

const Button = styled.button`
  width: 100px;
  margin: 10px;
  font-size: 1em;
  border-radius: 3px;
  padding: 0.25em 1em;
  border: 2px solid #0ac1a8;
  color: ${(props) => props.color};
  font-weight: ${(props) => props.bold && "bold"};
  background-color: ${(props) => (props.login ? "#0ac1a8" : "#ffffff")};
`;
Enter fullscreen mode Exit fullscreen mode

Como puedes ver hay varias formas de pasar props a nuestro componente de estilos.

  • Obtener el color desde el componente Test.
color: ${(props) => props.color};
Enter fullscreen mode Exit fullscreen mode
  • Utilizar un operador ternario para intercambiar el color de fondo.
background-color: ${(props) => (props.login ? "#0ac1a8" : "#ffffff")};
Enter fullscreen mode Exit fullscreen mode
  • También puedes utilizar && (cortocircuito).
font-weight: ${(props) => props.bold && "bold"};
Enter fullscreen mode Exit fullscreen mode
  • O si deseas varios cambios puedes realizar lo siguiente.
${(props) =>
  props.login &&
  ` color: white; 
  font-weight: normal; 
  background-color: #0ac1a8;`}
Enter fullscreen mode Exit fullscreen mode

Y de esta forma reducir tu código a sólo una prop.

Botones

Importante: Los componentes de estilos pasan atributo HTML conocido por el DOM, excepto las props ya que son personalizados.

const Test = () => (
  <>
    <Input placeholder="name" type="text" inputColor="#20534c" />
    <Input placeholder="lastname" type="text" />
  </>
);

const Input = styled.input`
  margin: 0.5em;
  padding: 0.5em;
  border-radius: 3px;
  border: 1px solid #00bfa5;
  color: ${(props) => props.inputColor || "#1976d2"};
`;
Enter fullscreen mode Exit fullscreen mode

Resultado:

Input1

Input2

Styled Components es suficientemente inteligente para filtrar atributos HTML y enviarlos al DOM como placeholder y type, pero el prop inputColor no pasa al DOM.

Herencia de estilos.

Puedes crear un nuevo componente que herede de otro y sobrescribir los estilos del mismo tipo.

const Test = () => (
  <>
    <Title>Login</Title>
    <SubTitle>Register</SubTitle>
  </>
);

const Title = styled.h1`
  color: #0ac1a8;
  font-family: "Lato", sans-serif;
`;

const SubTitle = styled(Title)`
  color: #303030;
`;
Enter fullscreen mode Exit fullscreen mode

De esta forma hereda los estilos y sobrescribe los del mismo tipo.

Titulo

Podemos heredar componentes propios o de terceros y modificar sus estilos.

Modificar etiqueta.

En el ejemplo anterior hay dos h1.

<h1 class="sc-fzoXzr dMpzlw">Login</h1>
<h1 class="sc-fzoXzr sc-fzpjYC iywToi">Register</h1>
Enter fullscreen mode Exit fullscreen mode

Puedes modificar la etiqueta con as, es una prop que permite modificar la etiqueta del componente.

const Test = () => (
  <>
    <Title>Login</Title>
    <SubTitle as="h2">Register</SubTitle>
  </>
);
Enter fullscreen mode Exit fullscreen mode

El resultado es el siguiente.

<h1 class="sc-fzoXzr dMpzlw">Login</h1>
<h2 class="sc-fzoXzr sc-fzpjYC iywToi">Register</h2>
Enter fullscreen mode Exit fullscreen mode

De esta forma puedes heredar estilos y modificar las etiquetas de tus componentes.

Usando CSS.

Para usar la función auxiliar es necesario importarla.

import styled, { css } from "styled-components";
Enter fullscreen mode Exit fullscreen mode

Puedes definir estilos CSS de esta manera:

const Paragraph = css`
  font-size: 1em;
  letter-spacing: 1.6px;
  ${(props) => (props.font ? "font-weight: 300;" : "font-weight: 400;")};
`;
Enter fullscreen mode Exit fullscreen mode

Esto puede ser útil cuando tienes estilos similares que puedes usar en varios componentes:

const AboutBio = styled.p`
  ${Paragraph};
  color: #00bfa5;
`;

const AboutAddress = styled.p`
  ${Paragraph};
  color: #1976d2;
`;
Enter fullscreen mode Exit fullscreen mode

Esto no genera otras clases CSS, sólo se incorporan los estilos a las dos clases.

Modificar estilos de hijos.

Si necesita modificar los estilos de uno de los elementos secundarios, puede agregar selectores.

const List = styled.li`
  color: #303030;
  list-style: none;
  font-weight: bold;
  font-family: "Roboto", sans-serif;

  a {
    color: #0ac1a8;
  }
`;
Enter fullscreen mode Exit fullscreen mode

La referencia "a" se aplicará a los hijos de cualquier profundidad, si sólo desea referirse a los hijos directos debe de usar > a.

List

SCSS.

El preprocesador que utiliza Styled Components, Stylis, admite una sintaxis similar a SCSS para los estilos de anidamiento.

const Test = () => (
  <>
    <List>Hello world!</List>
    <List>Hello world!</List>
    <List className="something">Hello world!</List>
    <div>Hello world!</div>
    <List>Hello world!</List>
    <div className="something-else">
      <List>Hello world!</List>
    </div>
  </>
);

const List = styled.div`
  color: #303030;
  font-family: "Roboto", sans-serif;

  &:hover {
    font-weight: bold;
  }

  & ~ & {
    background-color: red;
  }

  & + & {
    background-color: greenyellow;
  }

  &.something {
    background-color: orange;
  }

  .something-else & {
    background-color: grey;
  }
`;
Enter fullscreen mode Exit fullscreen mode

Refiriéndose a otros componentes.

En lugar de sólo referirse a cualquier tipo de selectores, también puede referirse a otros componentes de estilos.

const Title = styled.h1`
  color: blue;
`;

const Content = styled.div`
  ${Title} {
    color: green;
  }
`;
Enter fullscreen mode Exit fullscreen mode

Esto anulará los estilos originales de Title.

Animaciones.

Puedes hacer animaciones importando keyframes.

import styled, { keyframes } from "styled-components";
Enter fullscreen mode Exit fullscreen mode

Y crear una animación como en CSS.

const change = keyframes`
  0% { transform: scale(0.7,0.7) }
  100% { transform: scale(1.5,1.5) }
`;

const Text = styled.span`
  font-size: 1.2rem;
  padding: 2rem 1rem;
  display: inline-block;
  animation: ${change} 2s linear infinite;
`;
Enter fullscreen mode Exit fullscreen mode

Estilos globales.

Puedes crear estilos globales importando createGlobalStyle.

import { createGlobalStyle } from "styled-components";
Enter fullscreen mode Exit fullscreen mode

De esta forma tener estilos globales para toda tu aplicación.

const StyledGlobal = () => <GlobalStyle />;

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    color: #303030;
    background-color: #f6f6f6;
    font-family: 'Lato', sans-serif;
  }
`;

export default StyledGlobal;
Enter fullscreen mode Exit fullscreen mode

Importa el componente global en el componente raíz de su aplicación.

import StyledGlobal from "../utils/StyledGlobal";
Enter fullscreen mode Exit fullscreen mode

Espero les guste :)

Discussion

pic
Editor guide