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

Mezzanine

Answer 1

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

Mezzanine

Answer 2

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.

Nonpros

Answer 3

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;
}

Castera

Answer 4

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.

Belt

Answer 5

const Nav = styled(Link)your code here;

Blastula

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. – Merat