Styled Components
Clase 12 de 15 • Curso de Introducción a Librerías UI con React
Contenido del curso
Rodrigo Ramos Xochiteotzin
student•
hace 4 años
Rodrigo Ramos Xochiteotzin
student•
hace 4 años
Victor Manuel Sarria Salinas
student•
hace 4 años
Clase 12 de 15 • Curso de Introducción a Librerías UI con React
Contenido del curso
Rodrigo Ramos Xochiteotzin
Rodrigo Ramos Xochiteotzin
Victor Manuel Sarria Salinas
Orlando Manuel Mendoza Vargas
Dario Turchi
Julian Franco
Daniel Rodrigo Valdivieso Merino
Julian Franco
Tomás Gálvez
César Palma
Jahiker Rojas
florencia barbero
Daniel Rodrigo Valdivieso Merino
Max Felipe Hess Alvarez
Daniel Rodrigo Valdivieso Merino
Gilbert Ardila
Daniel Rodrigo Valdivieso Merino
Marco Antonio Alducin Garcia
Juan Camilo Lentino Villalba
Jassen Castillo
Arnaldo Duran
Alexander Arismendy
Esta librería es buenísima y muy útil si la forma en que te gusta trabajar los componentes está basada en los SFC (single file components, algo que te será familiar si vienes de Vue.js). Esto significa que puedas plasmar en un sólo componente el modelo, la vista y el controlador, separados de acuerdo a su responsabilidad. Por ejemplo:
import React from 'react' import styled from 'styled-components' const Wrapper = styled.div` width: 100vw; height: 100vh; background-color: red; ` const Component = (props) => { //logica, estado, etc return ( <Wrapper> {props.children} </Wrapper> ) }
Creamos un elemento div y lo estilizamos, llamándolo Wrapper. Luego dentro del componente de React lo usamos para renderizar otros elementos o componentes adentro de él. Si ya tienes el componente creado y quieres pasarlo por la librería styled componentes, lo único que tienes que hacer es pasarlo como parámetro de styled, es decir, styled ahora se usa como función:
import { MyComponent } from './MyComponent.jsx' const MyStyledComponent = styled(MyComponent)` //estilos css ` return ( <MyStyledComponent> </MyStyledComponent> )
Te será muy útil para crear clases dinámicas que sean sensibles al estado del componente ya sea interno o pasado por las props del padre.
Tip
Esta librería te permite trabajar con una sintaxis parecida a un pre-procesador de CSS para poder anidar estilos de acuerdo al uso de pseudo-elementos u pseudo-clases usando el ampersand (&). "&" significa que te estas refiriendo a la instancia del componente estilizado
const Ejemplo = styled.div` padding: 2rem; background: papayawhip; // cambio de color de fondo de acuerdo al hover &:hover { background: red; }
Checa la documentación
super completo like a este post.
En mi humilde opinión, yo no veo a Styled Components como una "Librería UI", por el hecho de que esta no ofrece componentes UI a los desarrolladores para que los usen en sus proyectos. . En cambio esto se conoce como una forma de "CSS in JS" y lo que en realidad sí es, es una alternativa para los Precompiladores de CSS como lo son SASS, LESS y Stylus.
me recuerda mucho a Luisito Comunica este profe
hay algo que no me queda muy claro, los type o los onClick igual se los puedo dar al <Button/> ? y las props son las del componente padre si ?
Hola Julián, gran pregunta. Ve a codesandbox pon este código e interactua con él.
import { useState } from "react"; import styled from "styled-components"; const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white; `; export default function App() { const [count, setCount] = useState(0); return ( <div className="App"> <Button onClick={() => setCount(count + 1)}>{count}</Button> </div> ); }
Te darás cuenta de que efectivamente podemos poveerle el evento onClick :)
Ahora cuentame tú, ¿Qué pasa cuando interactuamos con un input y ponemos un type diferente? 👀
Quedo pendiente a tu respuesta, saludos :)
PlatziAbrazo 💚
:O funciona de igual manera.
<Button type="reset" onClick={() => setCount(0)}> reset </Button> <Button type="button" onClick={() => setCount(count + 1)}> {count} </Button>
Hice esto, no habia entendido bien era que cuando uno pone el styled.button esta pasando la etiqueta html desde el styled. !!
Gracias !
Esta librería no brinda componentes listos, sino solo permite estilizar los componentes que ya tenemos creados nosotros.
Las librerías CSS-in-JS nos proporcionan un nuevo enfoque para escribir CSS. Su objetivo es abordar las limitaciones de CSS, como la falta de funcionalidad dinámica, alcance y portabilidad. A pesar de sus ventajas, CSS-in-JS es una tecnología controvertida, ya que muchos desarrolladores preguntan si vale la pena complicar aún más el desarrollo front-end.
Ahora que estoy aprendiendo React y he conocido styled-components, me ha gustado mucho, ya que nos permite anidar reglas, utilizar expresiones regulares de JS y cargar solo los estilos que necesitamos en el componente, lo cual es genial para la optimización del proyecto.
Hola! SOy nueva en esto, que terminal recomiendan usar? hay algun curso mas basico que me enseñe react. Yo vengo desde html, css y javascript con visualstudio
Yo utilizo la terminal de VSCode y me va suuuuuper bien :)
Saludos Florencia y muchos éxitos en este maravilloso camino.
Una duda, esta libreria solo puedes aplicar los estilos desde el componente padre y no desde el mismo componente?
por ejemplo intente poner estilos desde un componente boton pero no me dejo, lo hice en el componente padre que es app y automaticamente me dejo, esto si es asi no seria mas perjudicial para la aplicacion tener tanto codigo en un documento?
Hola Max, compartenos el código para ver como ayudarte pero en principio este debería dejar aplicar estilos a cualquier componente.
Lo importante ahí es manejar buenas practicas en cuanto a la estandarización de como manejará tu equipo los archivos.
Siempre es importante mantener estandares para facilitar la lectura del código en el futuro.
viendo style-components me pregunto ¿no sería mejor usar una librería de estilos como tailwindcss para darle estilos al componente normal de html? o hay alguna diferencia real que nos provea esta librería
La mejor herramienta siempre depende de las necesidades y de tu equipo, en mi equipo de trabajo por ejemplo, usamos taildwindcss, no por decisión mia. Cuando entré a trabajar allá ya lo utilizaban... nos va bien pero siempre y cuando se tengan claros los estandares del equipo.
No siempre una herramienta como taildwindcss es la ultima palabra, hay momentos en los que se nos queda corta y nos toca escribir el css, en nuestro caso scss.
A mi me parece que Styled Components es realmente la manera en que podemos usar CSS en React, y para no llenar con tanto código separarlo en un hook personalizado, aunque si lo viéramos de este modo, es sustituir los archivos propios de CSS a otros en JS. Yo si lo veo mas laborioso, pero quizas, pudiera no ser reutilizable para otros proyectos.
Styled Components nos permite trabajar con el CSS sin que los estilos se pisen entre si, me parece una de sus mayores ventajas y resulta muy útil, evitando algo que en ocasiones puede ser tedioso, pero por otro lado, a la hora de leer el código, al tener componentes con sus estilos incorporados puede llegar a ser mas complicado, todo depende del desarrollador, el equipo y la forma de trabajar.
es genial esta libreria
styled-components dudo que este cerca de ser una solución final, la lectura del código se desnaturaliza, styled jsx soluciona un poco mejor este problema, rescatando conceptos de styled-components
Claro que si