Criando componentes com Styled Components no React e Next.js (CSS-in-JS)

Isso significa que os estilos CSS são incorporados diretamente nos componentes, em vez de estarem em um arquivo separado. Com Styled Components, nós podemos criar componentes de maneira mais rápida e eficiente, sem se preocupar em gerenciar arquivos CSS adicionais.

INFORMAÇÕES IMPORTANTES 👇

Participe da nossa comunidade no Discord:

𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:

7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE

QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS

COMO APLICAR SOLID NO REACT - Inversão de dependência DIP

[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias

TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3

A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!

QUANDO NÃO UTILIZAR ESTADOS NO REACT?

MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO

TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3

A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!

---

Livros que me ajudaram:
Código Limpo
Arquitetura Limpa
Como ser um programador melhor
Estruturas de dados e algoritmos com JavaScript
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
14 hábitos de desenvolvedores altamente produtivos
Hábitos Atômicos
Aprendendo a Aprender
Rápido e devagar
A vida dos Estoicos
Meditações de Marco Aurélio

*Links afiliados.
---

👋 Você pode me encontrar aqui:

👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho mais de 4 anos de experiência.

✉️ Email comercial

📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.

#reactjs #nextjs #typescript #frontend #styles #css #tailwindcss

[devjunioralves]

NFORMAÇÕES IMPORTANTES 👇
Se você utiliza o Styled Component, você aplica um conceito fundalmental do SOLID, sabia?
Confira:

Promoções do dia:
Estruturas de dados e algoritmos com JavaScript
Hábitos Atômicos
Aprendendo a Aprender

[hailtonnascimento]

Muito boa as dicas, curto muito seus materiais, ansioso por mais vídeos de styled-component.

Parabéns

[edwilsondasilva]

Parabéns por compartilhar seus conhecimentos. Suas dicas são sensacionais. Valeu e mais um inscrito.

[yurigalvao]

Que vídeo incrível, muito bom!
Adoro vídeos de styles na vida real rsrs

[thiago.f_]

Outra dica preciosa e fantástica é que você também pode aplicar estilos em componentes de outras libs

Por exemplo, imagine que você queira estilizar o <Link /> do react-router-dom, você também poderia simplesmente fazer o seguinte:

import { Link } from 'react-router-dom'

export const Container = styled(Link)`
Color:
`

(Obs. Isso só se aplica a componentes que aceitam um className. Aqui estou utilizando @emotion, mas creio q o mesmo se aplica em Styled components)

[douglasoliveira]

Conteúdo massa! Estou me atualizando agora a nova estrutura do Nextjs e com a pasta app. Eu vi aqui que vc importa o theme do styled dentro do aquivo styles.ts, e funciona que é uma beleza. Mas seguindo a maneira de configurar o provider do styled component, como seria possível usar o theme da seguinte forma: background-color: ${(props) => props.theme.colors.primary}. Na documentação do Nextjs, a maneira de configurar o styled component ta bem diferente.

[luigiremor]

Ideia para um próximo video: fazer um select field com styled components e ainda mais, fazer um select field com multi select 🤩

[ESTvineceous]

como teu styled components ta funcionando sem usar o 'use client' em cima ?

[Linneker]

Aula boa pra quem ta começando! Acabou agregando demais dicas de bibliotecas, o que faz um pouco o iniciante ficar com medo. Mas bem detalhado a aula. Só uma sugestão, vc utilizou o Flex, Align Items, mas poderia usar Justify-Content Center pra alinhar tbm, e usar o GAP no DIV pra evitar colocar aquele Margin nos componentes que recebem herança! =D
Parabéns pela contribuição, é bacana a gente ver SENIOR compartilhando conhecimento, e até mostrar pra todos que não precisamos ser Enciclopédias de Conhecimento, que dá pra fazer coisas de N formas, e nem sempre existe a correta.

[bezerrath]

bota um "gap: 0.6rem;" pra evitar StartAdornment e EndAdornment.

[arturacm]

Pow mano parabens, bem legal.
Sugestão (ou spoiler) de um proximo video: trazer esses estilos do tema através do provider do Styled-Components.

[BADBOY-zybk]

você prefere utilizar o phosphor icons ao inves de react icons?

[flavinhow]

Styled component já está funcionando sem "use cliente"?

[SuuuuP]

que extensão é essa que te da sugestão de codigo?

[Gabriel-jesusvix]

Qual tema do vscode? E como você usa o styled.d.ts no projeto com styled components? com next. Valeu.

[marcusalmeida]

Qual extensão você usa para ajudar no styled-compenents para deixar tudo formatado? Eu estou aprendendo css e erro o nome dos coisa todo hora kk.

[franciscokelton]

o styled-component já está rodando em server side ou não acho necessario