Cómo utilizar la etiqueta Link con styled components en React y eliminar el subrayado: tutorial paso a paso

Los programadores utilizamos nuestro conocimiento de la lógica, las matemáticas y la resolución de problemas para diseñar soluciones informáticas eficaces. Hoy vamos a ver cómo usar la etiqueta Link de react-router-dom con styled-components y eliminar el subrayado que aparece por defecto. Al final del post, un ejemplo para copiar y pegar el código.

FRON END DEVELOPER

ariel.e.garcia

En primer lugar, si no conocen react-router-dom, es una librería de React que nos permite crear enrutadores para nuestra aplicación. Con Link podemos crear enlaces entre distintas páginas y evitar la recarga completa del sitio web.

Para empezar, creamos nuestro enlace utilizando la etiqueta Link, pasándole la ruta de destino como valor del atributo to. Por ejemplo:

Si usamos styled-components, podemos aplicar estilos a nuestro enlace de la siguiente manera:

Hasta aquí todo bien, pero notamos que nuestro enlace tiene un subrayado por defecto que no nos gusta. Para quitarlo, podemos utilizar la propiedad textDecoration y asignarle el valor none. Sin embargo, esto no funcionará porque Link no es un componente de HTML como a, sino que es un componente de React que utiliza a por debajo.

Para solucionarlo, podemos utilizar una técnica llamada prop forwarding. Es decir, le pasamos la propiedad className a nuestro componente Link y luego la utilizamos en nuestro componente estilizado. Esto nos permite controlar los estilos del a que se genera en el DOM.

En este ejemplo, le pasamos la clase custom-link a nuestro componente Link y la utilizamos para estilizar el a. Además, notamos que podemos utilizar la clase .active para estilizar el enlace cuando se encuentra en la página actual.

¡Y listo! Así podemos utilizar Link con styled-components y eliminar el subrayado por defecto. Espero que les haya sido útil este video y si tienen alguna duda o sugerencia, no duden en dejarla en los comentarios. ¡Nos vemos en el próximo video!

Acá todo el codigo:

jsx

import styled from 'styled-components';

const StyledLink = styled(Link)`
  color: red;
  text-decoration: none;
  &.active {
    font-weight: bold;
  }
`;

<StyledLink to="/about" className="custom-link">Acerca de</StyledLink>

Anuncio publicitario