Styled Components

Clase 12 de 15 • Curso de Introducción a Librerías UI con React

Rodrigo Ramos Xochiteotzin

student•

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.

Rodrigo Ramos Xochiteotzin

student•

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

Victor Manuel Sarria Salinas

student•

super completo like a este post.

Orlando Manuel Mendoza Vargas

student•

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.

Dario Turchi

student•

me recuerda mucho a Luisito Comunica este profe

Julian Franco

student•

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 ?

Daniel Rodrigo Valdivieso Merino

teacher•

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 💚

Julian Franco

student•

: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 !

Tomás Gálvez

student•

Esta librería no brinda componentes listos, sino solo permite estilizar los componentes que ya tenemos creados nosotros.

César Palma

student•

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.

https://webdesign.tutsplus.com/es/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574

Jahiker Rojas

student•

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.

florencia barbero

student•

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

Daniel Rodrigo Valdivieso Merino

teacher•

Yo utilizo la terminal de VSCode y me va suuuuuper bien :)

Saludos Florencia y muchos éxitos en este maravilloso camino.

Max Felipe Hess Alvarez

student•

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?

Daniel Rodrigo Valdivieso Merino

teacher•

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.

Gilbert Ardila

student•

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

Daniel Rodrigo Valdivieso Merino

teacher•

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.

Marco Antonio Alducin Garcia

student•

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.

Juan Camilo Lentino Villalba

student•

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.

Jassen Castillo

student•

es genial esta libreria

Arnaldo Duran

student•

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

Alexander Arismendy

student•

Claro que si

Styled Components

Introducción al curso

Bienvenida al curso

¿Qué es UI?

¿Qué es una librería UI?

¿Por qué una libreria UI?

¿Por qué usar una librería UI?

Beneficios al usar una librería UI

Tiempo de Desarrollo

Iteración del Proyecto

Escalabilidad del Proyecto

Dinero

Conclusión del modulo

Librerias UI

Tipos de librerias UI

Styled Components

Bootstrap

Material UI

Despedida

Resumen del curso