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 estilosbutton>

    <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 = () => (
  <>
    

      
        El color de este boton es RED
      

      Este botón tiene estilos: Es de color verde

      
        Este botón también tiene estilos: Es de color violeta
      
  
);

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

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

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