Cuando trabajas con React y necesitas que un componente cambie su apariencia según las props que recibe, Styled Components es la librería que une lógica y estilos en un mismo lugar. Aquí aprendes a instalarla, crear un botón reutilizable y cambiar su color con una simple prop.

Qué es Styled Components y por qué usarlo en React

Styled Components es una librería que te deja escribir CSS dentro de tus componentes de React y, lo más interesante, conectar esos estilos con la lógica de tus props. En lugar de pelear con clases globales, creas componentes estilizados que viven aislados.

¿Qué es Styled Components? Es una librería de React que te permite crear componentes con estilos encapsulados usando template literals y JavaScript, integrando lógica y CSS en un solo archivo.

La instalación es directa con npm install styled-components. Después de correr npm run dev, puedes verificar en el package.json que la dependencia quedó registrada y ya estás listo para usarla.

Cómo se importa la librería en un componente

Dentro de tu carpeta components, crea un archivo Button.jsx. La importación va arriba del archivo:

jsx import styled from 'styled-components';

Con eso ya tienes acceso al objeto styled, que es la base para construir cualquier elemento HTML estilizado.

Cómo crear un botón estilizado que cambie según las props

La idea es que tu botón reciba una prop como blue y, según ese valor, cambie su background-color. Para lograrlo, declaras una constante que represente el botón estilizado:

jsx const StyledButton = styled.button background-color: ${(props) => (props.blue ? 'blue' : 'gray')};;

Las comillas invertidas son template literals y dentro de ellas escribes CSS normal. La función con props es la que evalúa el ternario: si llega blue, pinta azul; si no, pinta gris.

Qué es children y para qué sirve dentro del botón

children es una palabra reservada de React que representa todo lo que pongas entre las etiquetas de apertura y cierre del componente. Sirve para renderizar texto, íconos, párrafos o cualquier elemento HTML interno.

jsx const Button = ({ children, blue }) => { return <StyledButton blue={blue}>{children}</StyledButton>; };

export default Button;

Así, cuando uses <Button blue>hola</Button>, el texto hola se inyecta dentro del botón gracias a children, y la prop blue activa el color azul.

¿Para qué sirve children en React? Es una prop especial que permite pasar contenido anidado dentro de un componente, como texto, otros componentes o etiquetas HTML.

Cómo reutilizar el componente con diferentes estilos

Una de las grandes ventajas es que puedes invocar el mismo componente varias veces con props distintas y obtener resultados diferentes:

jsx <Button>gris</Button> <Button blue><p>azul</p></Button>

El primero queda gris porque no recibe la prop blue. El segundo se pinta azul y además renderiza un <p> por dentro gracias a children. Si abres el inspector del navegador, vas a ver que React le asigna una clase generada automáticamente con un nombre que no controlas tú directamente.

Por qué la encapsulación de estilos es clave

Esa clase aleatoria es justo lo que hace especial a Styled Components: garantiza encapsulación de estilos. Cada componente tiene sus propias reglas CSS sin riesgo de que choquen con estilos de otras partes de la aplicación.

Algunos beneficios concretos de esta encapsulación:

• Evitas conflictos de nombres de clase entre componentes.
• Cada botón mantiene sus estilos únicos sin contaminar el resto.
• Puedes cambiar la apariencia de un componente solo con cambiar una prop.
• Integras lógica de JavaScript directamente con los estilos.

Esto es lo que diferencia a Styled Components de un CSS tradicional: estás mezclando la potencia de JavaScript con la presentación visual, todo dentro del mismo componente de React.

Conceptos y habilidades clave de la clase

Algunos puntos técnicos que aparecen y conviene tener claros:

• Styled Components: librería que combina CSS y lógica de React mediante template literals.
• Props condicionales en estilos: usar ${(props) => ...} para cambiar valores CSS según la prop recibida.
• Children: prop reservada de React para renderizar contenido anidado dentro de un componente.
• Encapsulación de estilos: cada componente tiene clases generadas automáticamente para evitar colisiones globales.
• Operador ternario en CSS: estructura condición ? valor1 : valor2 aplicada dentro de los estilos.

Muéstrame en los comentarios cómo te quedó tu botón gris y azul, y si te animaste a crear otras variantes con más props, cuéntame qué estilos probaste.