Revision history [back]

To use styled-components to customize the appearance of a Router Link, you can create a new component that extends the original Router Link, and use the styled-components syntax to add your desired styling.

Here is an example:

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

const StyledLink = styled(Link)`
  color: #fff;
  background-color: #343a40;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;

  &:hover {
    background-color: #212529;
  }
`;

export default function CustomLink(props) {
  return <StyledLink {...props} />;
}

In this example, we create a new component called CustomLink, which extends the Link component from react-router-dom. We then use styled-components to add some CSS styles to the StyledLink component.

You can use this CustomLink component wherever you would normally use the Link component, and your custom CSS styles will be applied. For example:

import React from "react";
import CustomLink from "./CustomLink";

export default function MyComponent() {
  return (
    <div>
      <CustomLink to="/">Home</CustomLink>
      <CustomLink to="/about">About</CustomLink>
      <CustomLink to="/contact">Contact</CustomLink>
    </div>
  );
}

In this example, we use the CustomLink component to create three links, each with their own destination URL and text content. When rendered, these links will have the custom styling we defined in the StyledLink component.