Styled components

Introducción:
Los Styled Components son una nueva forma de utilizar CSS con tus componentes en las aplicaciones frontend de hoy en día. Se trata del siguiente paso a los módulos CSS, estando el código CSS asociado únicamente al componente al que pertenece, sin afectar al resto de elementos de la página.
Cómo instalar Styled Components
Podrás instalar Styled Componentes tanto mediante npm como mediante yarn.
ara instalar Styled Componentes mediante npm usa el siguiente comando:

Para instalar Styled Componentes mediante yarn usa el siguiente comando:

Una vez hayas instalado Styled Components podrás importar la librería en tu proyecto:

Cómo Utilizar Styled Components

En este apartado vamos a ver los conceptos más básicos de los Styled Componentes, que en general son los que utilizarás casi todo el tiempo. Lo primero, asegúrate de haber importado la librería en tu script. Además, en estos ejemplos utilizaremos los componentes que creemos junto con React

Creación de un Styled Component
Para crear un Styled Components basta con que uses alguna de las propiedades del objeto styled. En el siguiente ejemplo creamos las propiedades CSS de un container:

Y con esto ya tenemos un Container, que será un componente de React en toda regla. Para ello hemos usado la función div del objeto styled, a la que hemos pasado todas las propiedades CSS mediante la misma notación que usamos en las plantillas literales o template literals, que son una forma de declarar cadenas de texto en JavaScript mediante comillas invertidas.

En concreto, hemos usado las template tags de estas plantillas, que permiten pasar el contenido de la cadena de texto a la función que tienen como prefijo. En este ejemplo, la función asociada es la función styled.div(), que recibe como parámetros tanto los elementos textuales de la cadena definida entre comillas invertidas como las posibles variables que se usen en su interior.

No solamente podrás crear divs, ya que también existen elementos input, section, button, a y toda la gama de diferentes etiquetas HTML.

Lo que usas no es otra cosa que código CSS, por lo que podrías personalizar tu botón con todo tipo de código CSS que sea válido. No existen limitaciones, por lo que si quieres también puedes anidar elementos o usar media queries:

Tampoco te tendrás que preocupar de los prefijos css o vendor prefixes particulares de cada navegador, ya que se agregarán automáticamente cuando compiles el código.