Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Curso de Next.js 2018

Curso de Next.js 2018

Roberto González

Roberto González

Styled JSX

4/23
Recursos

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.

Aportes 66

Preguntas 17

Ordenar por:

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

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"
            />

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”/>

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

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

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" />

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

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

Aqui esta la mia.

Reto completado!

My solution

Hola, soy nuevo por aqui XD, me esta encantando este curso, solo tengo una duda algo tonta XD, ¿Como se saca el simbolo ` en el teclado? D:

Que carrusel puedo usar en nextjs?

<style jsx> Solo se puede crear estilo por el componente activo.

**<style jsx global> ** Con este se puede crear estilo a toda la pagina.

Yo hice un Time line: 👇🏼👇🏼

<div>

      <div class="container">
        <div class="jumbotron">
          <h1>Dr. Norman Borlaug</h1>
          <h2><em>The man who saved a billion lives</em></h2>
          <div class="thumbnail"><img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"/>
            <p class="caption">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
          </div>
          <div class="hero">
            <h3>Time line of Dr. Borlaug's life:</h3>
            <ul>
              <li><strong>1914</strong> - Born in Cresco, Iowa</li>
              <li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
              <li><strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
              <li><strong>1937</strong> - Finishes university and takes a job in the US Forestry Service</li>
              <li><strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
              <li><strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
              <li><strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology</li>
              <li><strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major climate on Earth.</li>
              <li><strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
              <li><strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</li>
              <li><strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
              <li><strong>1970</strong> - receives the Nobel Peace Prize</li>
              <li><strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields</li>
              <li><strong>1984</strong> - becomes a distinguished professor at Texas A&M University</li>
              <li><strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops  are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
              <li><strong>2009</strong> - dies at the age of 95.</li>
            </ul>
            <blockquote>
              <p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."</p>
              <footer><cite>-Indian Prime Minister Manmohan Singh</cite></footer>
            </blockquote>
            <h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry</a>.</h3>
          </div>
        </div>
          <footer class="footer">
            <p>Written by:</p>
          </footer>
      </div>

      <style jsx>{`
        h1{ text-align: center; }
        h2{ text-align: center; }
        h3{ text-align: center; }
        p{ text-align: center; }
        li{ margin-bottom: .5rem; }
        img{ display: block; margin: 0 auto; width: 50%; }
        ul{ padding: 5%; }
        `}
      </style>

      <style jsx global>{`
        body{ margin-top: 60px; font-size: 1.5em; }
      `}</style>

    </div>

export default class extends React.Component {
    render(){
        return <div>
            <h1>Hola Mundo</h1>
            <p>Bienenidos al Curso de Next.js</p>
            <p>Enviar</p>
            <style jsx>{`
            h1 {
                color: red;
            }
            div :global(p) {
                color: green;
            }
            `}</style>

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

        </div>
    }
}```

Todas las <p> que se encuentren dentro de <div> tendrán este estilo
export default class extends React.Component {
    render(){
        return <div>
            <h1>Hola Mundo</h1>
            <p>Bienenidos al Curso de Next.js</p>
            <p>Enviar</p>
            <style jsx>{`
            h1 {
                color: red;
            }
            :global(div p) {
                color: green;
            }
            `}</style>

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

        </div>
    }
}```


De esta forma :global(div p)
Configura a que todos los p dentro de divs de toda nuestra aplicación deben de tener este estilo.
export default class extends React.Component {
  render () {
    return (
      <div>
        <picture>
          <img src="/static/platzi-logo.png" />
        </picture>
        <div className="TextContent">
          <h2>Realizado por <a>@MichaelSornoza</a></h2>
          <p>Práctica del curso Next.js de Platzi.com</p>
        </div>

        <style jsx>{`
          .TextContent {
            align-items: center;
            display: flex;
            flex-direction: column;
            color: white;
          }
          img {
            max-width: 10%;
            display: block;
            margin: 50px auto;
          }

        `}</style>
        <style jsx global>{`
          body {
            background-color: #224A62;
          }
        `}</style>
      </div>
    )
  }
}
       <style jsx>{`
          img {
            max-width: 220px;
          }
          .brandName p {
            font-size: 45px;
            font-style: normal;
            font-variant: normal;
            line-height: 49.5px;
            font-family: 'Helvetica Neue';
            display: inline;
          }
          .keller {
            color: #ccc;
            font-weight: 400;
            margin: -3.5px;
          }
          .williams {
            color: #666;
            font-weight: 150;
            margin: 3.5px;
          }
          .principal {
            width: 345px;
            margin: 0 auto;
          }
        `}</style>

        {/* <style jsx global>
          {`
            body {
              background: #2a2e31;
            }
          `}
        </style> */}

se puede usar sass, stylus, etc?
en el caso de que si, deberían ser globales?

mi página

export default class extends React.Component {
  render() {
    return (
      <div>
        <img src="/static/logo-misal.png" alt="logo" />
        <div className="wrapper">

          <h1>Esta página fue hecha por Tatiana</h1>
          <p>Bienvenidos a Misal.co</p>
        </div>

        <style jsx>{`
        p{
          font-size:16px;
          color:black;
         
        }
        img{
          max-width:50%;
          margin:0 auto;
          display:block
        }

        .wrapper{
          display:flex;
          flex-direction:column;
          align-items:center
        }
        `}</style>
        <style jsx global>{`
        body{
          background-color:white;
          
        }
        `}</style>
      </div>
    )
  }
}```

Hola, a alguien más le aparece este error en la consola del navegador: [](index.js:1 Warning: the ‘url’ property is deprecated. https://err.sh/zeit/next.js/url-deprecated)
Si alguno lo ha resuelto, ¿me puede decir cómo? gracias.

Tarea cumplida!

export default class extends React.Component {
  render() {
    return (
      <div>
        <center>
          <h1>HOME</h1>
          <img src="/static/logo-nextjs.webp" alt="NextJs" />
        </center>
        <style jsx>   {`
            h1 {
              color: #ec47cb;
            }
            img {
              max-width: 45%;
              display: block;
              margin: 0 auto;
            }  `}
        </style>
        <style jsx global>  {`
            body {
              background-image: url("/static/fondo.jpg");
            } `}
        </style>
      </div>
    );
  }
}

Así quedó 😄

export default class extends React.Component {
    render(){
        return(
            <div className="Content">
                <div className="logo">
                    <img src="/static/platzi-logo.png" alt="Platzi Logo" />
                </div>
                <h1>¡Hola a todos!</h1>
                <p>Me emociona comenzar el curso de Next.js</p>
                <p>React.js me está gustando muchísimo y me emociona aprender más sobre lo relacionado a este Framework</p>
                <div className="techs">
                    <img src="/static/technologies.png" alt="techs"/>
                    <img src="/static/nextjs.png" alt="nextjs"/>
                </div>

                <style jsx>{`
                    .Content {
                        height: 100vh;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        max-width: 300px;
                        margin: 0 auto;
                    }
                    h1 {
                        color: white;
                    }
                    p {
                        color: white;
                    }
                    .logo img {
                        width: 150px; 
                        display: block;
                        margin: 50px auto;
                    }
                    .techs img {
                        width: 100%;
                        margin-top: 15px;
                    }
                `}</style>

                <style jsx global>
                    {`
                    body {
                        background: #1A2A35;
                        text-align: center;
                        font-family: Arial;
                    }
                    `}
                </style>
            </div>
        )
    }
}```

Si utilizas un framework de css en deves de css propio. La manera de importarlo sería en una Master Page.

  1. Creo el archivo Master.js y dentro importo head, que vendría a ser parte de next.
  2. A travez de link escribo la ruta
    Ejemplo:

import Head from ‘next/head’;

export default class extends React.Component{
render(props){
return(
<div>
<Head>
<title>Proyecto con SSR</title>
<link rel=“stylesheet” href=“https://aquivalaruta”/>
</Head>
{props.children}
</div>
)
}

//los props.children es el contenido que va a heredar de cada una de las paginas
//y claro importo el MasterPage en mi archivo index, y en todas las demas paginas

**Ahora todo ese código se arriba es muy engorroso, con un sfc me ahorraria mucho mas:

const MasterPage = (props) => (
<div>
<Head>
<title>Proyecto con SSR</title>
<link rel=“stylesheet” href=“https://aquivalaruta”/>
</Head>
{props.children}
</div>
);
export default MasterPage

//Al no poner los corchetes y el return, doy por implicito estos

Pues, no es mucho pero es trabajo honesto haha…

export default class extends React.Component{
    render(){
        return(
            <div>
                <h2>Listo para ver el server side Rendering!</h2>
                <figure className='app_img'>
                    <img
                        src='/static/img.jpg'
                        alt='simple_image'
                    />
                </figure>
                <p>Página web creada por ManuelDEV</p>
                <style jsx>{`
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        margin 0 auto;
                    }
                    figure{
                        border-radius: 12px;
                        overflow: hidden;
                        width: 120px;
                        box-shadow: 0px 2px 5px #0000002;
                        margin: 0 auto;
                    }
                    p,h2{
                        text-align: center;
                        font-family: sans-serif;
                        margin-bottom: 12px;
                        padding: 5px;
                        color: white;
                    }
                    :global(*){
                        margin: 0px;
                        padding: 0px;
                        box-sizing: border-box;
                    }
                    :global(body){
                        background-color: #2c3e50;
                    }

                `}</style>
            </div>
        )
    }
}```

Les comparto mi resultado

Código

export default class extends React.Component{
    render(){
        return(
            <>
                <article>
                    <img src="/static/platzi-logo.png" alt="Logo Platzi"/>
                    
                    <h1>CREADO POR JAIME BURBANO</h1>
                    <p>FRONTEND REACT DEVELOPER</p>
                </article>

                {/* CSS */}
                <style jsx global>{`
                    body{
                        margin: 0;
                        background: linear-gradient(90deg,#1c3643,#273b47 25%,#1e5372);
                        bakground-repeat: no-repeat;
                        
                    }
                `}</style>

                <style jsx>{`
                    article {
                        width: 100vw;
                        height: 100vh;
                        user-select: none;

                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        justify-content: center;
                        align-content: center;
                        align-items: center;
                    }

                    img {
                        max-width 250px;
                        margin-bottom: 50px;
                        pointer-events: none;
                    }

                    h1 {
                        font-weight: bolder;
                        font-family: Arial, Helvetica, sans-serif;
                        opacity: .7;
                        margin-bottom: 0px;
                        color: white;
                        transition: all .4s;
                        cursor: pointer;
                    }

                    h1:hover{
                        opacity: 1;
                    }

                    p {
                        font-weight: bolder;
                        font-family: Arial, Helvetica, sans-serif;
                        opacity: .5;
                        letter-spacing: 2px;
                        font-size:14px;
                        color: white;
                        transition: all .4s;
                        cursor: pointer;
                    }

                    p:hover{
                        opacity: .8;
                    }

                `}</style>
                
            </>
        )
    }
}

Asi es como me quedo a mi:

export default class extends React.Component{
    render(){
        return <div className="contenido">
            <div className="logo">
                <img src="/static/platzi-logo.png" alt="Platzi-Logo"/>
            </div>
            <h1>Creado por Cesar Meza!!!  </h1>
            <p>Estoy emocionado por seguir con este curso!!</p>

            <style jsx>{`

            .contenido{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .logo {
                max-width: 50%;
                margin: 0 auto;
            }
            `}</style>
            <style jsx global>{`
            body {
                background: gray;
                color: white;
              
            }
            h1 {
               font-family: 'Quicksand', sans-serif;
            }
            p {
                font-family: 'Indie Flower', cursive;
            }
            `
            }</style>
        </div>
        
    }
}```

Esta muy modesto jejeje.

Aparte de la carpeta node_modules qué otros archivos puedo agregar al .gitignore para poder subirlo a un repositorio remoto? Hay demasiados en la carpeta .next

Reto cumplido

Así me quedo a mi…

export default class extends React.Component {
	render() {
		return (
			<div>
				<div>
					<img src="/static/platzi-logo.png" alt="Plazi" />
					<h1>Hola Mundo!</h1>
					<p>Bienvenidos al curso papus</p>
				</div>
				<style jsx>{`
					h1 {
						color: green;
					}

					p {
						color: green;
					}

					img {
						height: 100px;
					}

					div {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						background: #f3f3f3;
						border-radius: 20px;
						margin-top: 15%;
						padding: 10%;
					}
				`}</style>

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

Que sencillo parece ser Next.js por ahora.

solo puedo decir wow esta parte del uso de los estilos si que fue genial… me gusto mucho.

¿¿Por qué nadie de todos los que han hecho el reto, ha hecho lo que tocaba??
Se supone que hay que hacer una página que, desde el index vaya al about… ¿?
En fin…

les comparto este link de los codigos de colores html para que les pongan los que gusten
https://html-color-codes.info/codigos-de-colores-hexadecimales/

export default class extends React.Component{
    render(){
        return <React.Fragment>
            <div>
                <img src="/static/platzi-logo.png" alt="platzi"/>            
                <h3>Created for Felipe Carrasco</h3>
                <p>Curso de Next.JS de Platzi!</p>
            </div>
            {/** componente en la pagina */}
            <style jsx>{`
            h3 {
                color: red;
                text-align: center;
            }
            :global(p) {
                color: white;
                text-align: center;
            }
            img {
                max-width: 20%;
                display: block;
                margin: 0 auto;
                padding-top: 10%;
            }
            `}</style>
            {/** componente global */}
            <style jsx global>{`
                body {
                    background: #145C9E;
                }            
            `}</style>
        </React.Fragment>
    }
}

reto cumplido

export default class extends React.Component {
    render() {
        return <div>
            <img
                src="/platzi-logo-small.png"
                alt="Platzi logo"
            />
            
            <h1>Creado por Jhon Angulo</h1>
            <p href="#">Curso de Next.js de Platzi</p>
            
            <style jsx>{`
                h1 {
                    color: white;
                    text-align: center;
                }
                p {
                    color: white;
                    text-align: center;
                }
                img {
                    max-width: 20%;
                    display: block;
                    margin: 0 auto;
                }
            `}</style>
            <style jsx global>{`
                body {
                    background: #263238;
                }
            `}</style>
        </div>
    }
}

Esta implementación que utiliza NextJS es similar a lo que se genera con los WebComponents nativos de JS ya que me suena familiar lo de que solo los estilos afecten al componente me suena como el
Shadow Dom de los WebComponents.

Reto completado:

import { Fragment } from "react";

const About = () => (
    <Fragment>
        <img src="/vikingo.png" alt="Vikingo" />
        <h1>Creado Por JMZ</h1>
        <h2>Jugando con NextJS</h2>
        <style jsx>{`
            :global(body){
              background-color: #272822;
            }
            img {
              display: block;
              margin: 50px auto;
            }
            h1, h2 {
              color: #FFFFFF;
              text-align: center;
            }
        `}</style>
    </Fragment>
);

export default About;

Resultado

<code>
import React, { Component } from 'react'

 class About extends Component {
  render() {
    return (
      <div>
        <h2>Soy desarrolladora frontend</h2>
        <p>Aprendiendo next por primera vez</p>
        <a>bettyjimenez.com</a>

        <img src="../static/credit-card.png"/>
      <style jsx>
        {`
        img{
          width: 32px;
          height:32px;
        }
          h2{
            color: purple;
          }
          p{
            color: gray;
          }
          a{
            color:white;
          }
        `}
      </style>
      <style jsx global>{`
        body {
          background: red;
          
        }
      `}</style>
      </div>
</code>

Aqui mi "about"
Código:

import React from 'react';

export default () => (
  <>
    <div className="flex">
      <img src="/wd-logo.png" alt="Logo" />
      <h2>Created by &#65533;&#65533;&#65533;</h2>
      <p>Proyecto de aprendizaje de NextJS</p>
    </div>

    <style jsx>
      {`
        .flex {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
        }
        img, p, h2 {
          max-width: 50%;
          max-height: 50vh;
        }
        p, h2 {
          color: white;
          text-align: center;
        }
      `}
    </style>

    <style jsx global>
      {`
        body {
          margin: 0;
          background: #222;
        }
      `}
    </style>
  </>
);

Screenshot

Los styled jsx nos permiten crear los estilos css dentro del mismo componente, permitiéndonos crear componentes y aplicaciones muchas mas reactivas y poderosas para nuestros proyectos!

Mi Pagina about:

Completed

Así se ve mi diseño

Tiene alguna desventaja o consideración usar server side rendering a parte de lo de las apis?
Se me ocurre que en caso de tener millones de usuarios tendríamos que tener más servidores que con client side rendering(ejemplo).
Me gustaría saber cuando si y cuando no o si siempre es preferible usar Server Side Rendering

export default class extends React.Component{
    render(){
        return <React.Fragment>
        

        <img src="/logo-next.png"  alt="logo next" />
        <h1>Curso de NEXT.JS</h1>
        <p>de platzi</p>
        <p>Desarrollado por Luis Mejia</p>
    <style jsx> {`
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,700&display=swap');
  
    h1{
        color:black;
        text-align: center;
        font-family: 'ubuntu' ,sans-serif;

    }
    p{
        color:black;
        text-align: center;
        font-family: 'ubuntu' ,sans-serif;
    }
   
    }

    img{max-width:50%;
        display:block;
        margin: 0 auto;
    }
    `}</style>

<style jsx global> {`
 body{
    background:whithe;

`}</style>


         </React.Fragment>
    }
}```

![](
Este fue mi resultado

Reto

const About = () => (
	<div className="about">
		<div className="container">
			<h1>Jaime González</h1>
			<img src="/foto.jpg" alt="About me" />
			<h3>Fullstack Developer</h3>
			<p>
				Follow me <a href="https://twitter.com/mackenshy" target="_blank">@mackenshy</a>
			</p>
		</div>

		<style jsx>{`
			.about {
				display: flex;
				align-items: center;
				justify-content: center;
        height: 100vh;
			}

			.container {
				max-width: 300px;
				background: black;
				border-radius: 25px;
				color: white;
				text-align: center;
        box-shadow: 5px 5px 8px 3px rgba(0, 0, 0, .4);
			}

			img {
				width: 90%;
				padding: 0 5%;
				border-radius: 25px;
			}

			a {
				color: #0791e6;
			}

			:global(body) {
				width: 100vw;
				height: 100vh;
				margin: 0;
				padding: 0;
        background: #aaa;
			}
		`}</style>
	</div>
)

export default About

Es importante que si cambias un estilo global, tienes que recargar la página.

Solo por si alguien como yo se lo pregunta la escalabilidad es una propiedad deseable de un sistema que indica su habilidad para reaccionar, adaptarse o crecer continua y fluidamente SIN PERDER CALIDAD.

por aqui dejo mi resultado

Reto!

import React from 'react';

const About = () => (
  <section className='About'>
    <div className='Container'>
      <img className='Logo' src='/platzi-logo.png' alt='Platzi logo'/>
      <h1 className='Title'>Creado por @alexchip42</h1>
      <p className='Description'>Curso de Next.js de Platzi</p>
    </div>

    <style jsx>{`
      .About {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .Logo {
        width: 50%;
      }
    `}</style>

    <style jsx global>{`
      body {
        background: #1D3642;
        margin: 0;
        padding: 0;
        font-size: 16px;
        min-height: 100vh;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
      }
    `}</style>
  </section>
);

export default About;

Acabo de descubrir algo curioso…

Este es mi codigo :

import React from 'react'

export default class extends React.Component {
	render() {
		return <div>

		<h1>Hola platzi !</h1>
		<p>Bienvenidos al curso de Next Js</p>

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

		<style jsx>{`
			h1 {
				color: red;
			}
			p {
				color: green;
			}
			img {
				max-width: 50%;
				display: block;
				margin: 0 auto;
			}
		`}</style>

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

		</div>
	}
}```


Cuando cambio el color del background a yellow or blue, los estilos del primer <style> se rompen y todo se ve negro, a alguien más le pasa ? 

Reto


export default class extends React.Component {
  render() {
    return (
      <div className="myBody">
        <div className="Contenedor">
          <img src="/static/platzi-logo.png" alt="Platzi" />
          <h1>
            Creado por <a href="https://twitter.com/camh3190">@camh3190</a>
          </h1>
          <h2>Curso de Next.JS de Platzi</h2>
          <span>Reto</span>
        </div>
        <style jsx>{`
          @import url("https://fonts.googleapis.com/css2?family=MuseoModerno:wght@500&family=Suez+One&display=swap");
          .myBody {
            font-family: "MuseoModerno", cursive;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: #1f4b63;
            color: white;
          }
          .Contenedor {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
          h1 {
            margin: 20 auto;
          }
          img {
            max-width: 30%;
            min-width: 125px;
          }
          a {
            color: white;
          }
        `}</style>

        <style jsx global>{`
          body {
            margin: 0;
          }
        `}</style>
      </div>
    );
  }
}

Agreguen está extención para que el codigo css coja color

vscode-styled-jsx

export default class extends React.Component{
render(){
return(
<React.Fragment>
<img src =“https://static.platzi.com/media/tmp/class-files/git/platzi-nextjs/platzi-nextjs-2.StyledJSX/static/platzi-logo.png” alt=“platzi”></img>
<section>
<h1>creado por meza</h1>
<p>[email protected]</p>
</section>

        <style jsx>
            {`
            section{
                display:flex;
                align-items:center;
                flex-direction:column;
            }
            h1{
                color:white;
            
            }
            p{
                color:white;
            
            }
            img{
                max-width:30%;
                display:block;
                margin:0 auto;
            }
            `}
        </style>
            <style jsx global>
                {`
                body{background:#23354a}
                `}
            </style>
    </React.Fragment>

    )
}

}```

export default class extends React.Component{
    render(){
        return(
            <React.Fragment>
            <img src ="https://static.platzi.com/media/tmp/class-files/git/platzi-nextjs/platzi-nextjs-2.StyledJSX/static/platzi-logo.png" alt="platzi"></img>
            <section>
                <h1>creado por meza</h1>
                <p>emezab07@gmail.com</p>
            </section>
            
            <style jsx>
                {`
                section{
                    display:flex;
                    align-items:center;
                    flex-direction:column;
                }
                h1{
                    color:white;
                
                }
                p{
                    color:white;
                
                }
                img{
                    max-width:30%;
                    display:block;
                    margin:0 auto;
                }
                `}
            </style>
                <style jsx global>
                    {`
                    body{background:#23354a}
                    `}
                </style>
        </React.Fragment>

        )
    }
}

Reto done!

Que temas de colores esta usando para Visual Studio? A mi me muestra el CSS todo del mismo color.