Darle estilos a una aplicación de React usando Styled Components cambia por completo la forma en que piensas sobre CSS. En lugar de archivos separados o preprocesadores, escribes los estilos directamente con JavaScript, dentro de tus propios componentes. Esto permite crear componentes reutilizables que llevan su apariencia incorporada y que pueden reaccionar dinámicamente a las propiedades que reciben.
¿Qué es CSS in JS y por qué usar Styled Components?
CSS in JS es una técnica que permite escribir el código CSS directamente dentro de archivos JavaScript, vinculando los estilos con los componentes de forma nativa. Styled Components es la herramienta más popular para implementar esta técnica en React [0:18]. A diferencia del CSS tradicional o de preprocesadores como Sass, aquí cada componente encapsula sus propios estilos, evitando conflictos de nombres y facilitando el mantenimiento.
Para instalar Styled Components en un proyecto se ejecuta npm install styled-components o, si se trabaja en Code Sandbox, basta con agregarlo desde la sección de dependencies [1:06].
¿Cómo se crea un componente estilizado?
La mecánica es distinta a crear un componente funcional tradicional. En lugar de definir una función que retorne JSX, se utiliza la función styled seguida de la etiqueta HTML que se desea estilizar. Los estilos se escriben dentro de template literals (comillas invertidas) [1:50]:
javascript
import styled from "styled-components";
export const Title = styled.h2 padding-bottom: 10px; border-bottom: 1px solid blue;;
Este componente Title se usa exactamente igual que cualquier otro componente de React. Se importa con llaves porque no es una exportación por defecto [2:38].
¿Cómo aplicar hover, transiciones y estados deshabilitados?
Styled Components permite referenciar pseudo-clases usando el símbolo &, que representa al propio componente. Así se definen estilos para hover o disabled directamente dentro del mismo bloque [4:30]:
javascript
const StyledButton = styled.button`
cursor: pointer;
padding: 5px 10px;
border: 1px solid transparent;
transition: border-color 0.15s;
&:hover {
border-color: blue;
}
&:disabled {
background-color: lightblue;
}
`;
- El
&:hover indica: "a mí mismo, cuando el mouse esté encima, aplica estos estilos" [4:42].
- El
&:disabled permite cambiar la apariencia cuando el botón está deshabilitado [6:08].
- La propiedad
transition suaviza el cambio de border-color en 150 milisegundos [5:44].
Cuando el nombre del componente estilizado coincide con la función del componente original (por ejemplo, form y Form), la convención es anteponer la palabra Styled al nombre, como StyledForm [3:55].
¿Cómo funciona el ThemeProvider para estilos globales?
Una de las grandes ventajas de Styled Components es el ThemeProvider, un componente que envuelve toda la aplicación y distribuye un objeto de tema a todos los componentes hijos sin necesidad de pasar props manualmente en cada nivel [7:00].
javascript
import { ThemeProvider } from "styled-components";
const themes = {
avengers: {
bg: "#1a1a2e",
color: "#e94560",
color2: "#7b2d8e"
},
terminator: {
bg: "#0f0f0f",
color: "#ff0000",
color2: "#cc0000"
}
};
export const Theme = (props) => (
<ThemeProvider theme={themes.avengers}>
{props.children}
</ThemeProvider>
);
El ThemeProvider requiere obligatoriamente una propiedad theme que reciba un objeto [8:22]. Dentro de ese objeto se definen variables como colores de fondo, colores primarios y secundarios. Se crearon dos temas —Avengers y Terminator— para que la aplicación pueda cambiar de paleta de colores dinámicamente [8:05].
¿Cómo acceder al tema desde un componente estilizado?
Dentro de los template literals, se usa la interpolación de JavaScript para insertar una función que recibe las props del componente. Todas las props incluyen automáticamente el objeto theme proporcionado por el ThemeProvider [9:20]:
javascript
export const Title = styled.h2 padding-bottom: 10px; border-bottom: 1px solid ${(p) => p.theme.color2};;
- La función
(p) => p.theme.color2 extrae el color secundario del tema activo.
- Se usa
p como abreviatura de props para mantener el código más compacto [9:40].
- Este mismo patrón se aplica en el
border-color del botón en hover y en el background-color del estado disabled [10:20].
¿Qué sigue con los estilos dinámicos en React?
La aplicación ya responde al tema de Avengers, mostrando bordes y fondos con la paleta morada definida. El siguiente paso es hacer que el tema cambie dinámicamente cuando el usuario pase el mouse sobre cada película [11:15]. Esto implica modificar no solo componentes individuales sino también los estilos globales de toda la aplicación, aprovechando la estructura de themes con múltiples paletas de colores.
Si ya probaste Styled Components en tu propio proyecto, comparte qué patrón de temas te resultó más útil y cómo organizaste tus componentes estilizados.
