Styling a Router Link with styled-components

Question

What is the best way to style the Link using the styled-components library in the code that follows. I can find lots of examples to work with anchor tag but none to work with react-router link. Am I going about the correct way.

import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Nav = ({ className }) => {
  return (
    <div className={className}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </div>
  );
};
export default styled(Nav)`
  color: white;
  text-align: left;
  background: teal;
  width: 100%;
  ul {
    color: red;
    display: flex;
    flex-direction: row;
    border: 1px solid green;
    list-style: none;
    li {
      padding: 15px 15px;
      border: 2px solid purple;
    }
  }
`;

Thanks Joseph Shanahan

score 7 · Answer 1 · answered Dec 11 '19 at 22:06

Yes thanks for your help. A slimmed down version of what I will implement is as follows. It also has the advantage in that I did not have to implement an unordered list.

import React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Nav = ({ className }) => {
  return (
    <div className={className}>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </div>
  );
};
const NavLink = styled(Link)`
  padding: 20px;
  color: white;
  text-decoration: none;
  &:hover {
    color: red;
    background: blue;
  }
`;
export default styled(Nav)`
  color: white;
  width: 100%;
  display: flex;
  justify-content: flex-end;
`;

Thanks Joseph Shanahan

score 3 · Answer 2 · answered Dec 11 '19 at 15:29

You are in the right way, but little wrong, instead of using ul you just pass the component reference.

export default styled(Nav)`
  color: white;
  text-align: left;
  background: teal;
  width: 100%;
  ${Link} {
    /* style for Link Component */
  }
`;

Check this answer, it's very familiar.

score 0 · Answer 3 · answered Dec 11 '19 at 15:21

0

react-router link translates to after all in <a> tags so style them in the same way you would style an <a> tag so let's say, you need to change their color to red then:

ul {
    color: red;
}

won't work, you will need to do:

ul a {
    color: red;
}

answered Dec 11 '19 at 15:21

Abhay Maurya

11,819
8
46
64

score 0 · Answer 4 · answered Dec 11 '19 at 17:07

If you just want to style the Link component, then the usual way in my experience is to create a styled component like so:

const NavLink = styled(Link)`
  /* Link styles */
`

And then just render it like <NavLink>Home</NavLink>.

This also makes it easy to reuse this styled component.

uttam pun · Answer 5 · 2023-04-01T05:45:29.983

-1

const Nav = styled(Link)your code here;

edited Apr 01 '23 at 05:45

answered Mar 27 '23 at 15:20

uttam pun

1
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – devpolo Mar 31 '23 at 10:12

Styling a Router Link with styled-components

5 Answers5