Importar styled componentes globais igual ao styled de uma página? #2129

romulosardinha · 2021-08-09T21:22:05Z

romulosardinha
Aug 9, 2021

Eu gosto da idéia de todos os estilos de uma página serem importados como
import * as S from './styles'

Isso realmente faz ficar mais claro o que é um componente, e o que é um estilo.
<S.Card>Ola</S.Card>

Mas sobre estilos globais? aquele botão que é o mesmo para toda aplicação, porém é só um estilo.
Algum padrão bom? Eu fico incomodado em chama-lo igual a outros componentes.

vczb · 2021-08-10T14:33:07Z

vczb
Aug 10, 2021

No Styled Components tem um carinha que se chama GlobalStyles

import { createGlobalStyle } from 'styled-components'

const GlobalStyles = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    font-size: 62.5%;
  }
  html, body, #__next {
    height: 100%;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  }
`

export default GlobalStyles

Ai você importa ele como um componente mesmo, dentro de App

import { AppProps } from 'next/app'
import Head from 'next/head'

import GlobalStyles from 'styles/global'

function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>React Avançado - Boilerplate</title>
        <link rel="shortcut icon" href="/img/icon-512.png" />
        <link rel="apple-touch-icon" href="/img/icon-512.png" />
        <link rel="manifest" href="/manifest.json" />
        <meta
          name="description"
          content="A simple project starter to work with TypeScript, React, NextJS and Styled Components"
        />
      </Head>
      <GlobalStyles />
      <Component {...pageProps} />
    </>
  )
}

export default App

Pode ver um repositório se quiser

Mas no seu caso, se é um botão acho que deveria ser um componente mesmo, não faz mal que só tenha estilos, talvez no futuro tenha outras coisas

por exemplo:

import React from 'react'
import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'

import * as S from './styles'

type ButtonTypes =
  | AnchorHTMLAttributes<HTMLAnchorElement>
  | ButtonHTMLAttributes<HTMLButtonElement>

export type ButtonProps = {
  children: React.ReactNode | string | null
  size?: 'small' | 'medium' | 'large'
} & ButtonTypes

const Button = ({ children, size = 'small' }: ButtonProps) => {
  return <S.Button> {children}</S.Button>
}

export default Button

2 replies

romulosardinha Aug 11, 2021
Author

O conceito que estou falando é um pouco diferente. Vou contextualizar para ficar mais claro.
Imagine a seguinte organização:

-src
  -components
      -Card
           index.js
           styles.js
  -styles
       Button.js
  -pages
       -Exemplo
            index.js
            styles.js

Na página Exemplo temos:

import * as S from './styles'

<>
    <S.Header>Título do componente<S.Header>
    <Card> conteúdo </Card>
    <Button>Click</Button>
</>

Veja que no exemplo acima temos uma page 'Exemplo' usando um estilo S.Header, e só com esta nomenclatura sei que não é um componente do React e sim do Styled, e que este é exclusivo do componente que estou trabalhando, então está no styles.js da página 'Exemplo'

Note que o botão é um componente do Styled, que é global à aplicação, ou seja, poderá ser usado por todos, diferente do Header.

Uma alternativa que já vi em outro caso foi, usar outro prefixo para declarar componente de estilos mais globais.
por exemplo:

import * as S from './styles'
import * as UI from '../../styles'

<>
    <S.Header>Título do componente<S.Header>
    <Card> conteúdo </Card>
    <UI.Button>Click</UI.Button>
</>

Dessa forma fica claro! Sei o que é componente, sei o que é um estilo local do meu componente, sei o que é um estilo mais global da minha aplicação.

Porém não fiz testes sobre a "import * as UI". Não tenho certeza se ele gera um build maior, pois claramente não vou usar tudo do grupo de UI em todo componente, mas tenho certeza que vou usar tudo do grupo S dentro do componente.

mutheusalmeida Aug 11, 2021

Seria uma boa fazer o teste, porque parece ser uma alternativa boa

mutheusalmeida · 2021-08-10T18:11:01Z

mutheusalmeida
Aug 10, 2021

Eu gosto da idéia de todos os estilos de uma página serem importados como
import * as S from './styles'

Isso realmente faz ficar mais claro o que é um componente, e o que é um estilo.
<S.Card>Ola</S.Card>

Mas sobre estilos globais? aquele botão que é o mesmo para toda aplicação, porém é só um estilo.
Algum padrão bom? Eu fico incomodado em chama-lo igual a outros componentes.

Eu não conhecia esse padrão, acho que vou usar no meu projeto. Eu uso o createGlobalStyle também, assim como o @vczb respondeu

2 replies

romulosardinha Aug 11, 2021
Author

Primeiro que ví utilizando foi o Willian Justen , https://www.youtube.com/user/willjusten

coelhucas Aug 31, 2021

O nome desse tipo de import é "wildcard". É uma maneira alternativa para named imports:

import { Container, Text, Button } from './styles';
// mesmo que
import * as Styled from './styles';

ninetails · 2021-08-12T15:19:22Z

ninetails
Aug 12, 2021

Mas o ideal de se usar styled-components (método de estilização, não a lib) é você escopar e compor componentes, e evitar criar "globais" pois ao criar estilos globais você pode estar gerando side effects para sua aplicação.

A idéia dos frameworks atuais é trabalhar com Componentização e Composição. Por exemplo, você quer um botão que será utilizado por toda a aplicação, então faça apenas um botão que é chamado para toda a aplicação.

Ahh mas meu designer tá criando um botão diferente pra 5 páginas

Composição. Crie um Botão que será genérico e base e comece a extender/compor código a partir dele.

Isso pode ser feito de três maneiras:

você pode criar um botão que recebe props de modo a configurá-lo como você quer que seja visualmente coisas que forem variáveis;
você pode utilizar temas, todas as libs de styled-components possuem suporte a temas, você pode configurar por lá algo básico e personalizar via props;
ué, apenas extenda o botão... a maioria das libs também te deixam fazer isso

const ButtonBase = styled.button`
  /* estilos básicos, alguns até configuráveis por props ou por tema */
`

const MyDesignerMadeMeDoThat = styled(ButtonBase)`
  /* css que vai sobrescrever o estilo do botão base */
`

Só precisa sempre ficar atento é sempre tentar abstrair e evitar ou até mesmo brigar com o teu designer para que tenha componentes que sejam reutilizáveis, evitar criar muitos componentes fora do padrão senão tua codebase só vai aumentar e vai ficar difícil de gerenciar e dar manutenção.

4 replies

romulosardinha Aug 12, 2021
Author

Vlw @ninetails. Como sempre suas dicas são ótimas mano!

Neste caso continuo com o problema. Tenho um componente do Styled, que pode ser usado diretamente, ou estendido.
Porém pode ser confundido com um componente do React.

Pode ser só coisa da minha cabeça, me parece bem inconsistente. Gostaria sempre de deixar claro que algo é só um Styled, e algo é um componente React.

vczb Aug 12, 2021

Dá uma olhada nessa lib buffet eles separam os estilos em um diretório e o jsx em outro..

Ai repara aqui que eles chamam o botão de estilo com um alias StyledButton e só usam no componente

talvez ajude, abs

ninetails Aug 12, 2021

Opa @romulosardinha ,

Mas todo componente Styled é um componente React.

A separação vai depender exclusivamente da nomenclatura e da organização do teu projeto.

São componentes de qualquer forma, aceitam props, as props podem mudar o que vc quiser, vc pode fazer uma implementação de um Styled que venha um componente complexo com diversas tags dentro e não apenas 1 styled por tag...

Uma parada que não curto muito mas vejo alguns defendendo é o atomic design.

Você pode separar seus componentes em pacotes npm separados e subir pra uma infra própria, algo parecido com o Bit. Ou fazer um repositório de componentes...

Teus componentes ainda podem ter lógicas no meio também (exemplo que lembro de cabeça: controle de atributos ARIA dependendo do foco etc).

romulosardinha Aug 14, 2021
Author

@ninetails o atomic design é exatamente um dos pontos para meu desgosto.

Se eu criar apenas um componente Styled estou criando algo bem atômico. Enquanto que, de acordo com o atomic design, se eu estiver criando um 'Organismo' claramente ele não vai poder ser feito somente com Styled, será um componente feito com diversos outros componentes.

Isso implica em diferenças práticas, como por exemplo: a forma como é criado, nossos componentes React não compostos de ( Pasta / index, styles ) já os Styled são apenas o ( Componente ).
A outra grande diferença é o uso. Um Styled pode ser extendido por outro Styled, já um Compoente React não.

Então. Para a equipe não patinar nessa de 'Não sei exatamente o que é este componente que estou usando agora'. Pensei na possibilidade de nomenclaturas diferentes. Como disse aqui #2129 (reply in thread)

Importar styled componentes globais igual ao styled de uma página? #2129

Uh oh!

Replies: 3 comments · 8 replies

Uh oh!

Uh oh!

Uh oh!

romulosardinha Aug 11, 2021 Author

Uh oh!

Uh oh!

Uh oh!

romulosardinha Aug 11, 2021 Author

Uh oh!

Uh oh!

Uh oh!

romulosardinha Aug 12, 2021 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

romulosardinha Aug 14, 2021 Author

Replies: 3 comments 8 replies

romulosardinha Aug 11, 2021
Author

romulosardinha Aug 11, 2021
Author

romulosardinha Aug 12, 2021
Author

romulosardinha Aug 14, 2021
Author