Estilizar botones con styled components

Estilizar es un proceso fundamental en cualquier proyecto de programación. Especialmente en el desarrollo web, no basta con que nuestros elementos estén bien codificados si el usuario no entiende cómo funcionan o no tiene una guía para utilizarlos. Uno de los elementos más comunes en una aplicación web es el botón.

En este post, te enseñaremos cómo estilizar botones con styled components, una librería que nos facilita el proceso de diseño en React.

Antes de empezar a estilizar botones con styled components

Antes de enseñarte cómo estilizar botones con styled components, debemos crear un componente de botón. Para ello, te sugerimos crear una carpeta dentro de la carpeta de componentes de tu aplicación. En esta carpeta tendrás todos los componentes que serán comunes a todo el proyecto, por lo que la llamaremos common. Dentro de esta carpeta crearemos un archivo JavaScript llamado button.js.

Entonces, ¿cómo creamos un componente con styled components? Lo primero será importar la herramienta con la siguiente línea de código:

import styled from 'styled components';

Ahora, creamos nuestro componente button. Para crear un componente con styled components, declaramos una variable y la igualamos al objeto styled. En este objeto hay muchísimos elementos que verás desplegados al insertar el comando styled. en tu componente. Como estamos creando un botón, nosotros elegiremos el siguiente elemento:

const Button = styled.button

De este modo, podemos crear componentes basados en los elementos HTML. A estos componentes, les definimos un estilo para controlar su apariencia. Ahora, para pasar los estilos aplicamos los template literals. Para ello, abrimos un string con las comillas simples:

const Button = styled.button ' '

Es dentro de este string que vamos a empezar a estilizar botones con styled components.

¿Cómo estilizar botones con styled components?

Ahora que hemos creado nuestro componente Button, es hora de estilizarlo. Ten presente que, como hemos creado un botón HTML, podemos utilizar todas las propiedades HTML. Entonces, podemos empezar con definir una posición básica:

const Button = styled.button '
display: inline-flex;
';
export default Button;

Ahora que tenemos este botón definido, podemos insertarlo en el componente de nuestra aplicación para verlo en funcionamiento. Siempre que vayas a estilizar botones con styled components y, en general, cualquier proyecto de programación, te recomendamos tener abierto el servidor en tu navegador para asegurarte de que el código escrito esté funcionando. Para darle texto a un botón, basta con insertar el texto dentro de las etiquetas Button en tu componente.

<Button>Primary</Button>

Al inspeccionar el botón en tu inspector, notarás que este elemento button tiene una clase que ha sido aplicada automáticamente. Esta clase la creada styled components, es única y aplica una serie de apariencias al elemento, como la propiedad display:inline-flex que hemos declarado. De este modo, puedes aplicar todas las propiedades de estilo que desees para estilizar botones con styled components.

A continuación, te mostramos algunas de las propiedades que podemos aplicar:

const Button = styled.button '
align-items: center;
border-radius: 999px;
border-style: solid; 
border-width: 1px;
border-color: ${accentColor};
cursor:pointer: 
';

Como puedes ver en las anteriores propiedades, hay algunas que tienen elementos de JavaScript, como lo es border-color. Esto se da porque styled components nos permite utilizar la lógica de JavaScript dentro de CSS. Como estamos dentro de un string literal, podemos abrir llaves con dólar delante para meter expresiones JavaScript. Entonces, podemos crear una variable accentColor con el string de color que queramos.

const accentColor = 'rgb (29, 161, 242)';

Ahora que sabes cómo estilizar botones con styled components, ¡es momento de usar este conocimiento en tus propios proyectos! Para aprender a crear y desarrollar todo tipo de proyectos de programación, no solo en React sino también en lenguajes como JavaScript, CSS y HTML, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. ¿Te atreves a dar este siguiente paso en tu formación? ¡Matricúlate ya y conviértete en un profesional!