"Uso de Styled Components para Estilos Dinámicos en React"
Contenido del curso
Jimmy Buriticá Londoño
Sebastián Buitrago
Miguel Angel Reyes Moreno
Sebastián Buitrago
Miguel Angel Reyes Moreno
Mauricio Combariza
Juan Diego Quintero Calderón
Juan Pablo Jimenez
Omar Gabriel Aguilar Moscoso
Sebastian Heredia
Ricardo Mazuera
Santiago Jimenez Moncada
Joel Andres Bonilla Tellez
Ricardo Mazuera
César Palma
Hector Rubio
Ricardo Mazuera
Mauricio Moreno Morales
Cesar Augusto Suarez Medina
Víctor Isaac Arias García
Diego Herrera Prado
Juan Castro
Profesor
Max Andy Diaz Neyra
Sergio Sanc
Shelsy Angélica Garcia Laverde
Shelsy Angélica Garcia Laverde
Sebastián Buitrago
Sneyder Barreto
Juan Castro
Profesor
Rafael Lizarraga
Jorge De Jesus Tejeda Bello
Sylvester Josué Rojas Cañón
Lean Silva
que es el modelo mvc
Sebastián, es "Modelo Vista Controlador"
Objeto con los themes y sus respectivos colores;
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)" }, }
& se llama ampersand
Por si acaso alguien pasa por lo mismo, los componentes deben nombrarse con mayúscula inicial StyledForm, si no no funciona y uno puede pasar horas buscando el erro
++Estilos utilizados++
Form:
const StyleForm = 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; margin: 0px 15px; border: 1px solid transparent; transition: 0.15s border-color; &:hover { border-color: blue; } &[disabled] { background: lightblue; } `;
Title
export const Title = style.h2` padding-bottom: 10px; border-bottom: 1px solid ${(props) => props.theme.color2}; `;
creo que me quedo con los preprocesadores xd
xd
Es un dolor de cabeza trabajar en CodeSanbox, en este punto ya podemos crear una carpeta en VSC y configurarlo para el mejor manejo. :)
Total!!!!!... es lo único que no me ha gustado del curso, ese CodeSandbox.
total codesanbox es de lo por que eh visto
cuidado con typear mal
Estuve como 20min tratando de ver cual era mi error porque me salía en blanco la pantalla y encima la consola no me tiraba ningún error, en micaso era que habia puesto props.childern en vez de children! T.T
export const Theme = (props) => ( <ThemeProvider theme={themes["daredevil"]}>{props.childern}</ThemeProvider> );
Suele pasarnos a todos jaja
Styled Components va con React y su fea sintaxis xD
Pues es cuestión de gustos, lo mas seguro es que ya estes acostumbrado un tipo de sintaxis en especifico, pero eso no significa que sea peor o mejor, lo mejor es adaptarse y seguir aprendiendo-
Héctor, yo no estoy acostumbrado a ninguna sintaxis, apenas estoy aprendiendo y es horrible! jajaja. Me gustó más la de Vue Components de acuerdo al curso.
Para que en VSCode se se coloreen los template strings de los styled components instalen esta extensión
https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components
El símbolo & se llama ampersand
Parece que voy a tener que prácticar más esto de los styled-components es completamente nuevo para mi que solo conocia aplicar CSS normal y poco con preprocesadores y en JS puro
¿Qué es mejor usar en React? ¿Styled components o un pre procesador? ¿Combinar ambos sería una buena opción?
No hay una opción "mejor", solo opciones que se pueden adecuar más a un proyecto que a otro o simplemente que te gusten más. Combinar ambas también es una opción muy válida.
Códigos finales de la clase: Src/Theme.js
import React from "react"; import styled from "styled-components"; const StyledForm = styled.form` background-color: $bg; border: 1px solid $color; margin: 0 50px 25px; font-family: "Courier New", Courier, monospace; padding: 25px; text-align: center; transform: scale(1); transition: 0.3 transform; &:hover { transform: scale(1.2); } `; const StyledButton = styled.button` background: $color2; border: 1px solid $color; cursor: pointer; padding: 5px 10px; 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> <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> ); }
src/Ttitle.js
import styled from "styled-components"; export const Title = styled.h2` padding-bottom: 10px; border-bottom: 1px solid ${(p) => p.theme.color2}; `;
src/Form.js
import React from "react"; import styled from "styled-components"; const StyledForm = styled.form` background-color: $bg; border: 1px solid $color; margin: 0 50px 25px; font-family: "Courier New", Courier, monospace; padding: 25px; text-align: center; transform: scale(1); transition: 0.3 transform; &:hover { transform: scale(1.2); } `; const StyledButton = styled.button` background: $color2; border: 1px solid $color; cursor: pointer; padding: 5px 10px; 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> <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> ); }
En el Theme.js pusiste el codigo de Form.js si mal no estoy...
Asi quedo mi codigo del Form, tuve que hacer modificaciones ya que salian errores Les dejo la documentacion
import React from "react"; import styled from "styled-components"; const Form1 = styled.form` font-family: "Courier New", Courier, monospace; padding: 10px 25px 25px; text-align: center; transform: scale(1); transition: 0.3s transform; &:hover { transform: scale(1.2); } `; const Button = 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-color: ${(p) => p.theme.color2}; } `; export default function Form(props) { const [quantity, setQuantity] = React.useState(0); const { movie } = props; return ( <Form1> <h4>{movie.name}</h4> <Button type="button" onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 0} > - </Button> {quantity} <Button type="button" onClick={() => setQuantity(quantity + 1)} disabled={quantity >= movie.available} > + </Button> </Form1> ); }
Me sale este error al usar la propiedad Theme
dejo el link para que revisen el codigo aqui
¡Hola!
No estás retornando el ThemeProvider.
Deberías tener en la declaración de Theme:
export const Theme = (props) => { return ( <ThemeProvider theme={themes['avengers']}>{props.children}</ThemeProvider> ); };
Con eso no deberías tener errores. Un saludo.
Sneyder encontró el error perfectamente. :clap:
Excelente la forma de pedir ayuda mostrando el error y dejando el link al código. :ok_hand:
¡Estamos atentos a cualquier otra pregunta!
Hola Platzi! ¿Cómo va? Estoy armando una carpeta de Google Docs con la toma de notas de todos los cursos que voy realizando para que entre todos podamos aportar!
Los invito a participar! https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing
Styled component de cierta forma es como si estuviéramos creando los componentes desde css con estilos xD
Como siempre el profe Juan DC, conocedor de todas las areas <3
Me parece super entretenido React, por suerte ya que tiene mucha demanda laboral. Creo que me voy a avocar a estudiarlo por completo.