Estilizando nuestros componentes con styled-components

Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Introducción a Gatsby

¿Por qué Gatsby? Seguridad y Velocidad

¿Qué es Gatsby?

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

Requisitos previos y herramientas de desarrollo

Gatsby y Gatsby CLI y Starters

Configuración de ESLint

Fundamentos de Gatsby

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

Ecosistema de plugins

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

Router en Gatsby y Componente Link

Layout en Gatsby

Graphql en Gatsby

¿Cómo funciona GraphQL en Gatsby?

Accediendo a nuestros datos en Gatsby desde GraphQL

Queries, Edges (conexiones) y Nodos en Gatsby

Consultas en GraphQL desde React

Usando plugins en Gatsby

Instalación y configuración de plugins

Imágenes como fuente de datos

Plugins de transformación

Estilizando nuestros componentes con styled-components

Estilos Globales con styled-components

Stripe checkout

Introducción a la API de Stripe Checkout

Agregando productos a nuestra tienda en línea

Productos en React

Generando páginas programáticamente

Creando páginas en función de los datos

Manejo de Gatsby Templates

Terminando la Vista de Detalle de los Productos

StaticQuery vs. useStaticQuery

Construyendo el Carrito de Compras: useContext

Construyendo el Carrito de Compras: Vista

Construyendo el Carrito de Compras: Agregar productos al carrito

Comprando productos

Gatsby a producción

Gatsby build para compilar nuestro proyecto

Deploy a Netlify

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Styled Components es una herramienta que nos ayuda a usar lo mejor de CSS en JavaScript y React.

Para usar esta herramienta solo debes seguir los siguientes pasos:

Instalar styled-components:

npm install --save styled-components

Importar styled desde styled-components:

import styled from 'styled-components';

Crear un componente estilizado siguiendo la sintaxis de styled components (styled.etiquetaDeHTML):

const Button = styled.button`
  /* Estilos CSS para nuestro botón */
`;

Podemos configurar las propiedades de CSS usando las props de todos nuestros componentes en React:

const Button = styled.button`
  /* Estilos CSS para nuestro botón */

  color: ${props => props.color || 'black'};
`;

También podemos escribir los estilos usando variables o funciones de JavaScript:

const colors = {
  green: '#98ca3f',
  orange: '#f8b7c1',
};

function GetColor(color) {
  return colors[color];
}

const Button = styled.button`
  /* Estilos CSS para nuestro botón */

  color: ${colors.green};
  background-color: ${GetColor('green')};
`;

También podemos configurar estilos con selectores anidados:

const Button = styled.button`
  /* Estilos CSS para nuestro botón */

  color: ${props => props.color || 'black'};

  &:hover {
      /* Estilos CSS para nuestro botón cuando hacemos hover */
  }
`;

Finalmente, podemos usar nuestros componentes estilizados como cualquier otro componente en React:

const IndexPage = props => (
  {/* ... */}

  <Button color="gray">¡Comprar!</Button>

  {/* ... */}
);

Aportes 9

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

jean pierre gabriel nieto acosta

hace 5 años

Styled comoponents se parece demasido, por su forma de escribirse, a Sass

silvana murgo

hace 4 años

1- Mas sobre style components: https://styled-components.com/showcase?item=target

2- Style components en gatsby https://www.gatsbyjs.com/docs/styled-components/#reach-skip-nav

3- Una buena extesion para usar style-components en vcode
- Name: vscode-styled-components
- Id: jpoissonnier.vscode-styled-components
- Description: Syntax highlighting for styled-components
- https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

Miguel Ángel Reyes Moreno

hace 3 años

Estilizando nuestros componentes con styled-components

Los styled components son como una copia de elementos HTML, podemos escribir CSS dentro de JS.

Podemos acceder a los props del componente desde JS:

const Button = styled.button`
  width: 8rem;
  color: #fff;
  background-color: #98ca3f;
  border: none;
  border-radius: 10px;
  color: ${props => props.color};
  &:hover {
    transform: scale(1.4);
    cursor: pointer;
  }
`

const IndexPage = ({data}) => (
  <>
    <SEO title="Home" />
    <Jumbo description={data.allSite.edges[0].node.siteMetadata.description}/>
    <Button color='gray'> Comprar </Button> /*seleccionamos el nombre del color*/
    <Link to="/gracias">Go to gracias</Link>
  </>
)