3. Styled Components

Antes de prosseguir com as funcionalidades da aplicação, vamos conhecer os Styled Components. Como já sabemos, cada elemento da aplicação pode ser dividido em um componente, e os styled components são basicamente uma forma bem legal de darmos estilos css a esses componentes.

Nessa aplicação, vamos criar um padrão em que todo component criado, terá um container dentro que vai englobar o restante das tags, e esse container que vamos estilizar. Para fazer isso, em cada pasta que teremos components, teremos também um arquivo 'styles.js'. Sim, nosso css vai funcionar dentro de um arquivo js!

A primeira coisa que vamos fazer é instalar o styled-components. Essa será a única biblioteca externa dessa aplicação. Para instalar, basta executar yarn add styled-components no seu terminal.

Vamos então ao nosso arquivo 'styles.js'. Começamos importanto do styled-components, e logo abaixo criamos um component que vai receber os estilos. A gente declara o nome do component, nesse caso Container, e atribui ele a um elemento do html, como por exemplo uma div. E dentro das crases, escrevemos nosso estilo css encadeado (como é de costume fazer no sass). Abaixo tem um exemplo da estrutura:

import styled from 'styled-components';

export const Container = styled.div`
      position: relative;

      h2 {
         display: block;
         font-weight: 700;
      }

      input.task{
         font-size: 15px;
         line-height: 1.5;
         color: #666666;
         display: block;
         width: 100%;

         ::placeholder { 
            color: #c0c0c0;
            opacity: 1; 
         }
      }

         button {
            width: 80px;
            height: 80px;

            &:hover {
               background: #333333;
            }
         }
`

Depois de criado o estilo, vamos ao arquivo index.js do próprio component e importar ele. Dessa forma:

import { Container } from "./styles/App"

Pronto, agora podemos usar nosso component estilizado, dentro dos nossos components principais!