Parte 2: Configurando Styled Components
Tags: react, typescript, javascript, frontend
Published: 2020-08-09 13:50:11

Até o momento, nossa template já possui: 

* Compatibilidade entre múltiplos editores
* Padronização de Código automatizado
* Embelezamento de código automatizado

Agora, iremos configurar funcionalidades extra para nosso projeto. Uma delas, é o tão famoso **Styled Components**, que mudou a forma como escrevemos CSS/SCSS em projetos React. Vamos lá?

## O que é o Styled Components?

Este é um pacote que surgiu por volta de 2016 e veio da necessidade do CSS se adequar a componentização proposta pelo React em sua criação. A ideia do Styled Components é criar componentes React com seu CSS individual e que pode ser facilmente replicado em outras páginas e outros projetos.

No exemplo abaixo, vemos a construção de um componente feito em Styled Components com estruturação de temas e aplicação em um JSX.

```jsx
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;
const Container = styled.div`
  text-align: center;
`
render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);
``` 
Legal não é? Vamos configura-lo em nossa template.

## Instalando Styled Components

Para instalar o pacote, basta executar o comando abaixo:

```
yarn add styled-components

# Logo após

yarn add @types/styled-components -D
```

Pronto, já está instalado. Agora, vamos utilizar uma configuração muito especial e que o Styled Components nos disponibiliza, a configuração de **estilos globais**.

## Configurando Global Style

A configuração do Global Style ajuda a configurarmos um CSS comum a todas as páginas. Essa é uma pratica comum entre desenvolvedores para sobrescrever certas configurações padrão do navegador, além de configurar fontes e cores padrão. O Global Style também é um **componente React** que será importado em nosso *App.tsx*.

Vamos criar, dentro da pasta *src* uma pasta chamada **styles** e dentro dela o arquivo **global.ts**.

Para configurar o global style, apenas importamos essa configuração do styled components e exportamos o componente funcional criado:

```ts
import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
`;
```

Aqui, a configuração fica a seu critério, mas, mostro abaixo a configuração comum que uso em meus projetos.

```typescript
import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }
  body {
    background: #312e38;
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }
  body, input, button {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
  }
  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 500;
  }
  button {
    cursor: pointer;
  }
`;
```

## Ativando Global Style

Em nosso **App.tsx**, basta importarmos nosso componente e inseri-lo no retorno do App.

```tsx
import React from 'react';
import GlobalStyle from './styles/global';

function App() {
  return (
    <>
      <GlobalStyle />
    </>
  );
}

export default App;

```

Pronto! Mais uma configuração feita em nossa template. Ela está disponível no [github](https://github.com/aryclenio/ReactJS-Typescript-Template).

No próximo artigo, configuraremos o react-app-rewired que sobrescreve as configurações do webpack.

Te aguardo lá!
Obrigado pela leitura!