Styled Components Basics (Spanish)

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

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>
}

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;
}

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";

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;
`;

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.

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>
);

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>
);

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

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};

• Utilizar un operador ternario para intercambiar el color de fondo.

background-color: ${(props) => (props.login ? "#0ac1a8" : "#ffffff")};

• También puedes utilizar && (cortocircuito).

font-weight: ${(props) => props.bold && "bold"};

• O si deseas varios cambios puedes realizar lo siguiente.

${(props) =>
  props.login &&
  ` color: white; 
  font-weight: normal; 
  background-color: #0ac1a8;`}

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

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"};
`;

Resultado:

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;
`;

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

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>

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>
  </>
);

El resultado es el siguiente.

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

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";

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

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;
`;

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;
  }
`;

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

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;
  }
`;

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;
  }
`;

Esto anulará los estilos originales de Title.

Animaciones.

Puedes hacer animaciones importando keyframes.

import styled, { keyframes } from "styled-components";

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;
`;

Estilos globales.

Puedes crear estilos globales importando createGlobalStyle.

import { createGlobalStyle } from "styled-components";

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;

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

import StyledGlobal from "../utils/StyledGlobal";

Espero les guste :)