Estilos Dinámicos con Theme Provider y Style Components
Contenido del curso
Jimmy Buriticá Londoño
Sebastián Buitrago
Juan Castro
Profesor
Miguel Angel Reyes Moreno
Rodrigo Martinez
Cristian Florez
Emanuel Alvarado Godinez
Ylerson Almonte
Cindy Posada
Alejandro Mejia Escobar
Michael Merchan
Valentina Arenas Lozano
Paolo Joaquin Pinto Perez
Jean Carlos Hernandez Carrasquel
Ricardo Mazuera
Joel Andres Bonilla Tellez
Juan Castro
Profesor
Obed Paz
Josafat Muñoz Valverde
Angel David Contreras Barrios
Ivan Andres Diaz Lopez
Lucas Brumatti
Ariel Ricardo Delgadillo Terrazas
Camilo Gonzalez
Elvis Milan
Cristofher Jumbo Jimenez
Anfernee Valera
Gustavo Gonzalez Montero
Ricardo Mazuera
Danilo Valenzuela
Juan Castro
Profesor¿Les gusta este logo de Styled Components?
Si y no, ajajaj no es por ser machista pero pues el logo da como a entender de que es algo como de mujeres, por lo de pintarse la uña.
Pintarse las uñas no es de hombres ni mujeres, igual que la programación. En este caso, el logo hace referencia a estilizar componentes en React, así como "estilizamos" las uñas con el esmalte. :wink:
Es la primera vez que entro a React y veo que están saltando de un archivo a otro y me parece todo muy confuso :/
Tranquilo, la gracia del curso es que puedas familiriazarte con los frameworks para tener mayor perspectiva.
La idea de la clase era ver el potencial de los Estilos dinámicos, lo tecnico ya lo vemos en los cursos especiales de react y styled components
Le agregué la portada de cada película al hacer hover :D
Quedo bien pero un color oscuro por default hace que el salto entre blanco y oscuro en el hover no sea tan brusco
Te quedó bien !!
Esto es demasiado cool
Comparto mi vista https://codesandbox.io/s/elegant-villani-vwkil
Comparto la emoción de Juan David cuando cambió a verde 😂
Sería intersante un curso práctico de CSS-in-JS con los angular, react y Vue. :D
Con desestructuración también queda más limpio el uso del theme en Styled Components
background: ${ ({theme}) => theme.bg }
Gracias por compartir esta buena práctica compañero.
Esoooooo
Es mi primera vez trabajando con React junto con Styled components, se ve bastante complejo pero interesante :o
de primeras, el código se ve muy feo jajaja
Wao Genial, style components
ahi va mi aporte: https://codesandbox.io/s/flamboyant-night-qqv0fq?file=/src/form.js
agregue las imagenes de las peliculas y que al hacer hove en cada div cambie el color
Si le agregan lo siguiente al GlobalStyle.js la transición de color se ve mas chida c:
transition: 0.5s background;
import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` html, body { background: ${(p) => p.theme.bg}; font-family: Arial, Helvetica, sans-serif; transition: 0.5s background; } `;
Les cmparto lo que hice https://codesandbox.io/s/pelis-react-0lqw5?file=/src/Theme.js :D Tantos archivos confunden, pero volviendo sobre cada paso se agarra el hilo. Muy bien explicado. En el mio definí un tema por defecto y que cambie el estilo sólo cuando el cursor esté encima de un formulario y al salir vuelva el estilo por defecto
excellent!!
Si teneis prisa usar chakra. Con chakra vais rapido no, lo siguiente
no entiendo porque no me funciona :( cuando hago hover me salta este error.
ThemeProvider: "theme" prop is required.
// App.js import React from "react"; import { Theme } from "./Theme"; import { Title } from "./Title"; import Form from "./form"; const movies = [ { name: "Avengers", available: 5 }, { name: "Thor", available: 3 } ]; export default function App() { const [theme, setTheme] = React.useState("Avengers"); return ( <Theme theme={theme}> <Title>Películas</Title> {movies.map((movie) => ( <Form movie={movie} updateTheme={() => setTheme(movie.name)} /> ))} </Theme> ); } // GlobalStyle.js import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` html, body { background: ${(p) => p.theme.bg} } `; // Theme.js import { ThemeProvider } from "styled-components"; import { GlobalStyle } from "./GlobalStyle"; const themes = { avengers: { bg: "#ceceff", color: "#335", color2: "rgba(5, 5, 100, 0.5)" }, terminator: { bg: "#ccffcc", color: "#010", color2: "rgba(50, 100, 50, 0.5)" } }; export const Theme = (props) => ( <ThemeProvider theme={themes[props.theme.toLowerCase()]}> <GlobalStyle /> {props.children} </ThemeProvider> ); // form.js import React from "react"; import styled from "styled-components"; const StyledForm = styled.form` font-family: courier; margin: 0 50px 25px; padding: 10px 25px 25px; text-align: center; transform: scale(1); transition: transform 0.3s; &:hover { transform: scale(1.2); } `; const StyledButton = styled.button` cursor: pointer; padding: 5px 10px; border: 1px solid transparent; transition: 0.15s border-color; &:hover { border-color: ${(p) => p.theme.color2}; } &[disabled] { background: ${(p) => p.theme.color2}; } `; export default function Form(props) { const [quantity, setQuantity] = React.useState(0); const { movie } = props; return ( <StyledForm onMouseEnter={() => props.updateTheme()}> <h4>{movie.name}</h4> <StyledButton type="button" onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 0} > - </StyledButton> {quantity} <StyledButton type="button" onClick={() => setQuantity(quantity + 1)} disabled={quantity >= movie.available} > + </StyledButton> </StyledForm> ); }
Hola, Intenta usando los mismos nombres de las películas tanto en el nombre del objeto de los temas, como en el 'name' del arreglo de películas: Osea aquí:
Gracias por tu pregunta Valera y gracias por tu respuesta Gustavo, era justo ese el error y me estaba volviendo loco solucionándolo. De no ser por ti hubiese vuelto a empezar todo el vídeo.
Que tan recomendable es styled components en proyectos grandes?
Mucho. Sobre todo si el equipo piensa en sistemas de diseño. :D