Solucionado
Boa tarde,
Gostaria de entender melhor como usar o styled components no Next.
Para criar estilos globais eu uso o globals.css (onde eu teria constantes globalmente usadas)?
Da mesma forma, para aplicar styled components nas páginas o ideal seria usar o módulo styles, criando por exemplo um Home.module.css, e aí aplicar os styled components ali?
E os temas, como ficariam?
Obrigado!
Fala André, tudo bem?
Para utilizar os estilos global no next você utilizaria normalmente como se fosse utilizar no react, importando o createGlobalStyle em algum arquivo js e estilizar, por exemplo, criaremos um arquivo chamado GlobalStyles.js na pasta styles do next e lá começaremos a criar nosso estilo global como no react:
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
//Aqui vai nosso estilo global
.body {
margin: 0;
padding: 0;
}
`
export default GlobalStyle;
Agora que importamos o createGlobalStyle, criamos nosso estilo global e exportamos, agora basta utilizar como component no arquivo index.js:
import GlobalStyle from './styles/GlobalStyle.js';
export default Home() {
return (
<GlobalStyle />
...restante do código
)
}
E é assim que utilizamos estilos globais com o styled components no next. Veja mais sobre isso clicando
Espero ter ajudado, bons estudos :D
Mateus, tudo bom? Obrigado!
E a estilização da pagina e dos temas?
A estilização da pagina e temas são a mesma coisa do react também :D