Estilizando nuestros componentes con styled-components

Styled Components es una herramienta que nos ayuda a usar lo mejor de CSS en JavaScript y React.

Para usar esta herramienta solo debes seguir los siguientes pasos:

1. Instalar styled-components:

npm install --save styled-components

2. Importar styled desde styled-components:

import styled from 'styled-components';

3. Crear un componente estilizado siguiendo la sintaxis de styled components (styled.etiquetaDeHTML):

const Button = styled.button`
  /* Estilos CSS para nuestro botón */
`;

4. Podemos configurar las propiedades de CSS usando las props de todos nuestros componentes en React:

const Button = styled.button`
  /* Estilos CSS para nuestro botón */

  color: ${props => props.color || 'black'};
`;

5. También podemos escribir los estilos usando variables o funciones de JavaScript:

const colors = {
  green: '#98ca3f',
  orange: '#f8b7c1',
};

function GetColor(color) {
  return colors[color];
}

const Button = styled.button`
  /* Estilos CSS para nuestro botón */

  color: ${colors.green};
  background-color: ${GetColor('green')};
`;

6. También podemos configurar estilos con selectores anidados:

const Button = styled.button`
  /* Estilos CSS para nuestro botón */

  color: ${props => props.color || 'black'};

  &:hover {
      /* Estilos CSS para nuestro botón cuando hacemos hover */
  }
`;

7. Finalmente, podemos usar nuestros componentes estilizados como cualquier otro componente en React:

const IndexPage = props => (
  {/* ... */}

  <Button color="gray">¡Comprar!</Button>

  {/* ... */}
);