Cursos Empresas Blog Live Conf Precios

Styled JSX

Clase 4 de 23 • Curso de Next.js 2018

Clase anteriorSiguiente clase

Resumen

Vamos a hablar en esta clase de Styled JSX que es el sistema de estilos que maneja Next.js y viene a resolver algunos problemas que son muy típicos del mundo de React, e incluso algunos que son más propios de CSS.

Jhon Manuel Angulo Moncada

student•

para next "9.1.3"

ya no se usa "static", en su reemplazo se usa "public"

y la imagen se cargaría así:

<img 
            src="/platzi-logo-small.png"
            alt="Platzi logo"
            />

Noel Zenon Callapiña Angles

student•

Mil Gracias! me sirvió tu feedback!

sue herrera

student•

love u! ya tenia trauma de hacerlo mal. nos has salvado estamos agradecidos :D

Fides Gerardo Escalona Molina

student•

Si no te carga la imagen (el logo de platzi) ahora se crea un directorio public en lugar de static y en el atributo src de la etiqueta img solo se coloca /platzi-logo.png sin public, ni static ni nada...

<img src="/platzi-logo.png" alt="Platzi"/>

Johan Stivens Suarez Galindo

student•

Excelente, me funcionó, gracias!

Sergio Toshio Minei

student•

Style JSX

Styled JSX que es el sistema de estilos que maneja Next.js.

¿Por qué usar Style JSX?

Es más acorde a React.
Evitamos problemas al escalar.

¿Cómo funciona?
Escribimos CSS3 como siempre pero solo aplica al componente.

<style jsx>{`
  .clase {color: red}
`}<style>

Style JSX solo se aplica por componente. Tampoco se aplica a componente internos o externos.

¿Cómo se pueden romper estas reglas?

Atributos Globales

<style jsx global>

Estos atributos se van a aplicar a toda la aplicación. No se recomienda usar atributos globales.

<style jsx global>{`
  body {background: red}
`}<style>

Operador Global

:global()

Este nos permite aplicar un atributo de css de manera global.

<style jsx>{`
  :global(p) {color: green}
`}<style>

En el caso anterior, todas las etiquetas p van a tener el estilo color:green.

Si se quiere aplicar un estilo a todos los hijos de la aplicación, se puede hacer de la siguiente manera:

<style jsx>{`
  div :global(p) {color: green}
`}<style>

En este caso, se aplica el p{ color: green } a todos los p que están dentro del componente.

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Fernando Ontiveros

student•

Listo !

export default class extends React.Component {
  render() {
    return (
      <div>
        <div className="container">
          <h1>Acerca del curso</h1>
          <img src="/static/about-img.jpg" alt="Platzi"/>
          <p>Next.js promete ser uno de los frameworks más utilizados por devs frontend</p>
        </div>
        <style jsx>
          {`
            .container {
              font-family: 'Avenir', Helvetica, Arial, sans-serif;
              display: flex;
              flex-direction: column;
              height: 100%;
              align-items: center;
              justify-content: space-around;
            }
            h1 {
              color: #14BDEB;
              font-size: 5.5em;
            }
            :global(div p) {
              color: #EEF4ED;
              font-size: 3.5em;
              text-align: center;
            }
            img {
              max-width: 70%;
            }
          `}
        </style>

        <style jsx global>
          {`
            body {
              background: #2C302E;
            }
          `}
        </style>
      </div>
    );
  }
}

Henry Villavicencio

student•

Next ha cambiado un poco. Ahora debes colocar la carpeta static dentro de una llamada public. A mí no me cargaban las imágenes y así pude soluciona

Cesar Augusto Garzón Puentes

student•

Exactamente. https://nextjs.org/docs/basic-features/static-file-serving

Victor Israel Torrecillas Garcia

student•

Gracias !

Guillermo Vara De Gante

student•

A partir de la version 9.1 de Next te da un warning de que es mejor colocar los recursos estaticos dentro de la carpeta public, seria algo como "public/static/logo.png". https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md

John Alexander Agudelo Galeano

student•

En la nueva versión los assets se ponen dentro de una carpeta "public" y se accede desde el componente solo ingresando el nombre del asset.

<img src="/platzi-logo.png" alt="logo platzi" />

Luis Daniel Becerra Avellaneda

student•

Reto Completo:

Edwin García

student•

¿Se puede usar Sass? ¿Se pueden crear los estilos en una hoja aparte?

Santiago Marcano

student•

Hola Edwin. Si es posible! Puedes usar tanto hojas de estilo como módulos CSS.

https://github.com/zeit/next-plugins/tree/master/packages/next-sass

En ese repositorio encontrarás la integración completa de Sass a un proyecto existente de Next.js

diego andres guzman

student•

con nexy v 9.4.4, los estaticos se crean la carpeta Public

David Daniel Castillo Nava

student•

Mi reto!!

Julio Hurtado

student•

El código del componente en github:

Jose Chirinos

student•

Importante esta clase

examen spoiler alert

Styled JSX:

Como funciona?
Escribimos CSS3 como siempre,
sólo aplica al componente.

Estilos al componente

<script jsx>{`
	... tus estilos como en css
`}</script>

Estilos de forma global

<script jsx global>{`
	... tus estilos como en css
`}</script>

Operador :global()

Ejemplo:

<div className="main">
	<Navegacion/>
</div>

//Navegacion Component
<div>
	<a>Home</a>
</div>

Cambiar el estilo de Navegacion

<script jsx>{`
	.main:global(a){
		color:red;
	}
`}</script>

Casos Especiales

:global(p){ ...estilos } = afecta a todos los <p> de la app

div:global(p){ ...estilos } = hace referencia al <div> del componente y afecta a todas sus <p>

:global(div p){ ...estilos } = todos los <p> que estén dentro de un <div> en la app, serán afectadas

Alan Mena

student•

Reto cumplido:

import { Fragment } from 'react';

export default function Bird() {

    return (
        <Fragment>
            <style jsx>{`

                img {
                    max-width: 100%;
                    text-align: center;
                    display: block;
                    margin: auto;
                }
        
            `}</style>

            <style jsx global>{`
                body {
                    background: #273837;
                }
            `}</style>

            <img 
                src="/static/Bird.jpg" 
                alt="Kolibri"
            />

        </Fragment>
    );
}

Jorge Méndez Ortega

student•

good

Juan David Sánchez

student•

Aqui esta la mia. !Screenshot NextJS

Manuel Ojeda

student•

Reto completado!

Jorge Velasquez

student•

My solution

Cristihan Albarran

student•

nice!

José Antonio aparicio gallego

student•

A mí me gustaría saber donde está ubicado tsconfig

Erik Elyager

student•

Esa es una buena pregunta, imagino que en algún directorio dentro de node_modules y de nextjs 🤔pero... ¿para qué quieres saber? creo que si quieres modificar la configuración default lo que debes hacer es crear tu propio tsconfig en el directorio raíz de tu proyecto.

Aquí la documentación al respecto.

Johan Stivens Suarez Galindo

student•

Que extensión utiliza el profesor para que VSC autocomplete el style jsx?

Erik Elyager

student•

Yo uso esta extensión https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx.

Platzi Team

student•

emmet, luego configuras el package.json del editor agregando "javascriptreact".

 "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },

Ramiro Nicolas DAccorso Rosati

student•

Estoy teniendo problemas: al aplicar estilos globales, dejan de funcionar los estilos comunes. Porque sera? Dejo mi codigo.

export default class extends React.Component {
    render() {
        return (
            <div>
                <h1>Hola Mundo!</h1>
                <p>Bienvenidos al curso de Next.js</p>

                <style jsx>{`
                h1 {
                    color:red;
                }
                p {
                    color: green;
                }
                `}</style>

                <style jsx global>{`
                body {
                    background: yellow;
                }
                `}</style>
            </div>
        )
    }
}```

Ramiro Nicolas DAccorso Rosati

student•

Solved! no me den bola!

Pablo Colqui

student•

A mi tambien me dio el mismo problema, lo cambio de orden, pruebo de distintas maneras pero no me funciona, si cambio algo en el global, se desconfigura el jsx comun. Como lo resolviste?