Styled JSX - Vercel #2007

vczb · 2021-02-02T00:57:53Z

vczb
Feb 2, 2021

O que vocês acham de styled jsx ?, peguei um exemplo de um blog

Dizem que tem vantagens de performance etc etc... Mmas olhando parece bem pouco prático na verdade... Quero aprender mais, alguém conhece ?

import Head from "next/head";
import Navigation from "./Navigation";

type Props = {
  children: React.ReactNode;
};
export default function Layout({ children }: Props) {
  return (
    <div className="root">
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="apple-touch-icon" href="/icon.png" />
        <meta name="theme-color" content="#fff" />
      </Head>
      <nav>
        <Navigation />
      </nav>
      <main>{children}</main>
      <style jsx>
        {`
          .root {
            display: block;
            padding: 4rem 0;
            box-sizing: border-box;
            height: 100%;
          }
          main {
            display: flex;
            min-height: 100%;
          }
          @media (min-width: 769px) {
            .root {
              display: flex;
              flex: 1 0 auto;
            }
            main {
              flex: 1 0 auto;
            }
          }
        `}
      </style>
    </div>
  );
}

giovannism20 · 2021-02-02T01:51:54Z

giovannism20
Feb 2, 2021

O que vocês acham de styled jsx ?, peguei um exemplo de um blog

Dizem que tem vantagens de performance etc etc... Mmas olhando parece bem pouco prático na verdade... Quero aprender mais, alguém conhece ?

import Head from "next/head";
import Navigation from "./Navigation";

type Props = {
  children: React.ReactNode;
};
export default function Layout({ children }: Props) {
  return (
    <div className="root">
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="apple-touch-icon" href="/icon.png" />
        <meta name="theme-color" content="#fff" />
      </Head>
      <nav>
        <Navigation />
      </nav>
      <main>{children}</main>
      <style jsx>
        {`
          .root {
            display: block;
            padding: 4rem 0;
            box-sizing: border-box;
            height: 100%;
          }
          main {
            display: flex;
            min-height: 100%;
          }
          @media (min-width: 769px) {
            .root {
              display: flex;
              flex: 1 0 auto;
            }
            main {
              flex: 1 0 auto;
            }
          }
        `}
      </style>
    </div>
  );
}

Acho que esse exemplo é um tanto quanto ruim mas para te responder por agora vou te deixar esse link: 8 reasons to use styled-components - Ele vai te trazer diversos exemplos práticos.

2 replies

vczb Feb 2, 2021
Author

Styled-Components eu conheço e gosto bastante! estou me referindo ao styled jsx da vercel

https://github.com/vercel/styled-jsx

aqui tem mais um exemplo dele

export default () => (
  <div className="root">
    <style jsx>{`
      .root {
        color: green;
      }
    `}</style>
  </div>
)

É tipo um css inline... vc já usou ?

vczb Feb 2, 2021
Author

Olha como eles declaram um botão:

const Button = (props) => (
  <button>
     { props.children }
     <style jsx>{`
        button {
          color: #999;
          display: inline-block;
          font-size: 2em;
        }
     `}</style>
     <style jsx>{`
        button {
          padding: ${ 'large' in props ? '50' : '20' }px;
          background: ${props.theme.background};
        }
     `}</style>
  </button>
)

ninetails · 2021-02-08T14:36:52Z

ninetails
Feb 8, 2021

Não tenho certeza mas talvez tenha uma otimização caso você utilizar Next.js, pois são os mesmos mantenedores e vem ativo por padrão neste metaframework (mas não achei nada falando sobre, explicitamente).

Mas pessoalmente ainda prefiro utilizar um styled-components ou emotion

0 replies

didiraja · 2021-02-11T19:14:06Z

didiraja
Feb 11, 2021

Styled Components é ótimo, mas pra mim só fez sentido dentro do ambiente React (nunca mexi com Angular). Com Svelte e Vue, prefiro csszinho mesmo, turbinado com pre-processor.

0 replies

vczb · 2021-02-11T20:05:31Z

vczb
Feb 11, 2021
Author

Quanto a esse jsx que a pessoa enfia o css ali no meio do html fico me perguntando porque usar ele ao invés de um sass com classnames ?! a única resposta que me vem em mente é perfomance. Imagino que o jsx combinado com algum style guide tipo tailwind, bootstrap , material ou outro, faça mais sentido, mas ele sozinho... ainda não me convenci

1 reply

ninetails Feb 15, 2021

Na verdade a melhor forma de utilizá-lo em todo potencial seria sem nenhum framework css externo. A maioria das implementações styled-component fazem com que o CSS gerado fique escopado dentro de onde está sendo utilizado, evitando assim que outros elementos da página herdem por cascata suas propriedades.

E a maioria deles também possibilita a interpolação de dados, ou seja, é possível no React passar uma prop e utilizá-la dentro do próprio CSS. Como os estilos são gerados de forma dinâmica na maioria das bibliotecas, o CSS não fica preso a um valor predeterminado pois é gerado em runtime.

Sim, deve haver uma perda de performance pois há um processamento na máquina cliente, mas geralmente o ganho desse dinamismo tende a ser maior para a maioria dos casos.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Styled JSX - Vercel #2007

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Styled JSX - Vercel #2007

Uh oh!

vczb Feb 2, 2021

Replies: 4 comments · 3 replies

Uh oh!

Uh oh!

giovannism20 Feb 2, 2021

Uh oh!

vczb Feb 2, 2021 Author

Uh oh!

vczb Feb 2, 2021 Author

Uh oh!

Uh oh!

ninetails Feb 8, 2021

Uh oh!

didiraja Feb 11, 2021

Uh oh!

vczb Feb 11, 2021 Author

Uh oh!

ninetails Feb 15, 2021

vczb
Feb 2, 2021

Replies: 4 comments 3 replies

giovannism20
Feb 2, 2021

vczb Feb 2, 2021
Author

vczb Feb 2, 2021
Author

ninetails
Feb 8, 2021

didiraja
Feb 11, 2021

vczb
Feb 11, 2021
Author