Afinal, o que é styled-components?

É uma biblioteca (lib) que nos permite escrever códigos CSS dentro do JavaScript. Dessa maneira não precisamos mais ficar importando nossos arquivos .css em nossas páginas e se um dia precisarmos utilizar esse mesmo componente em outro projeto, uma das maneiras seria basicamente copiar o arquivo .js.

Vamos criar um arquivo breakpoints.js e definir os tamanhos e os breakpoint dos dispositivos.

const size = {
  sm: '576px',
  md: '768px',
  lg: '992px'
}

const device = {
 sm: `(min-width: ${size.sm})`,
 md: `(min-width: ${size.md})`,
 lg: `(min-width: ${size.lg})`
}

Usando o código acima em um arquivo styled-components

import breakpoint from 'resources/breakpoints'
...

const Title = styled.h1`
  @media screen and ${breakpoint.device.sm}{
        font-size: 3rem;
    }
    @media screen and ${breakpoint.device.md}{
        font-size: 5rem;
    }
    @media only screen and ${breakpoint.device.lg}{
        font-size: 5.5rem;
        line-height: 7rem;
    }
`;

Até a próxima pessoal!