Adicionei algumas configurações adicionais para o editor (.editorconfig, .prettierrrc) olha lá o repositório.
1- Instalar Icones e lib para responsividade
yarn add styled-icons react-sticky-box
2-Em tsconfig.json desabilitar o "isolatedModules": false
3-No root do projeto vamos criar uma pasta src/styles com o arquivo GLobalStyles.ts, arquivo padrão com zerando css exemplo de projeto da Rocketseat: https://github.com/Rocketseat/youtube-clone-twitter/blob/master/src/styles/GlobalStyles.ts
import { createGlobalStyle } from 'styled-components';
export default createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: var(--white);
}
html, body, #root {
max-height: 100vh;
max-width: 100vw;
width: 100%;
height: 100%;
}
*, button, input {
border: 0;
background: none;
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
}
html {
background: var(--primary);
}
:root {
--primary: #000;
--secondary: #15181C;
--search: #202327;
--white: #D9D9D9;
--gray: #7A7A7A;
--outline: #2F3336;
--retweet: #00C06B;
--like: #E8265E;
--twitter: #33A1F2;
--twitter-dark-hover: #011017;
--twitter-light-hover: #2C8ED6;
}
`;
Em nosso index.tsx importamos e usamos GlobalStyles
import Head from 'next/head'
import styled from 'styled-components';
import GlobalStyles from '../src/styles/GlobalStyles';
const Title = styled.h1`
color: red;
`;
export default function Home() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<Title>Criando Sistema de Imóveis com Next.js Reactjs Typescript Styled-Components [Part 3] - Configurando Styled-Components</Title>
</main>
<footer>
</footer>
<GlobalStyles />
</div>
)
}
Top comments (0)