Como Reutilizar CSS Com Styled Components

Seguindo o conceito de DRY, devemos evitar reescrever códigos repetidos
E o mesmo se aplica em CSS! Pensando em um cenário onde podemos ter um CSS que se aplica em vários lugares e precisamos alterar, teríamos que alterar em todos os lugares que fizemos a chamada.

E é por isso que é sempre bom termos esse tipo de código em um só lugar!

Mas você sabia que é possível criar regras CSS comuns com o Styled-components?

Para criar um estilo comum com Styled é muito simples:

Primeiro criamos nosso arquivo comum:

import { css } from 'styled-components';

const CommonStyles = css`
  background-color: #c9c9c9;
  color: #000;
  text-align: center;

  @media (min-width: 768px) {
    text-align: left;
  }
`;

export default CommonStyles;

Agora que temos nosso CSS criado, basta usarmos em qualquer styled nosso:

import styled from 'styled-components';
import CommonStyles from '../../../styles/CommonStyles'; // importamos ele

export const Container = styled.section`
  ${CommonStyles}; 
  height: 100vh;
  display: flex;
  ...
`;

Muito simples e fácil criar um arquivo reutilizável de CSS, não é?