Estilos Globales con styled-components

Al estilizar componentes con Styled Components estamos definiendo estilos únicamente de los componentes creados con styled, no al resto de nuestra aplicación (a pesar de que trabajemos con otras etiquetas HTML iguales a las que definimos en los componentes estilizados con styled):

const StyledButton = styled.button`
  color: red;
`;

const App = () => (
  <>
    <StyledButton>
      El color de este boton es RED
    </StyledButton>

    <button>Este botón no tiene estilos</button>

    <button className="boton-color-violeta">
      Este botón tampoco tiene estilos
    </button>
  </>
);

Sin embargo, Styled Components también nos permite crear estilos globales: Estilos que podemos aplicar a todas las clases o etiquetas HTML de la aplicación.

1. Importa createGlobalStyle de styled-components:

import { createGlobalStyle } from 'styled-components';

2. Crea un nuevo componente con los estilos globales de tu aplicación usando createGlobalStyle:

export const GlobalStyles = createGlobalStyle`
  button {
    color: green:
  }

  button.boton-color-violeta {
    color: purple;
  }
`;

3. Envuelve toda tu aplicación en el componente de estilos globales:

const App = () => (
  <>
    <GlobalStyles />

      <StyledButton>
        El color de este boton es RED
      </StyledButton>

      <button>Este botón tiene estilos: Es de color verde</button>

      <button className="boton-color-violeta">
        Este botón también tiene estilos: Es de color violeta
      </button>
  </>
);

4. Puedes usar el componente con estilos globales como parte de tu layout:

// gatsby-browser.js
const GlobalStyles = require('src/styles');

exports.wrapRootElement = ({ element }) => (
  <>
    <GlobalStyles />
    <Layout>
      {element}
    </Layout>
  </>
);