A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Trabajando en React con Styled Components

21/28
Recursos

Aportes 19

Preguntas 4

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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

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};
`;

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

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>
);

Es un dolor de cabeza trabajar en CodeSanbox, en este punto ya podemos crear una carpeta en VSC y configurarlo para el mejor manejo. ūüėÉ

Styled Components va con React y su fea sintaxis xD

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

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

creo que me quedo con los preprocesadores xd

Styled component de cierta forma es como si estuviéramos creando los componentes desde css con estilos xD

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>
      <h3>{movie.name}</h3>
      <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>
      <h3>{movie.name}</h3>
      <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>
  );
}

El símbolo & se llama ampersand

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

Solo podr√© agregar este comentario pero estoyūü§Į

El profesor en el minuto 10:56 comenta sobre ‚ÄúArrow Function‚ÄĚ pero si colocas las llaves no funciona, la solucion es usar () => ()

No me ha disgustado del todo styled-components, se ve mas complejo que un preprocesador pero lograr estilos dinamicos se ve interesante.

Hasta ahorit me parece que Vue es lo mas friendly con los que venimos empezando jaja pero toca adaptarse.