是的，谢谢你的帮助。我将实现的精简版本如下。它还有一个优点，那就是我不必实现一个无序列表。

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

谢谢约瑟夫·沙纳汉

你的方法是正确的，但也没有什么错，你只是传递了组件引用，而不是使用ul。

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

看看这个answer，很熟悉。

react-router link翻译为毕竟在<a>标签中，因此以与<a>标签相同的方式设置它们的样式，因此假设您需要将它们的颜色更改为红色：

ul {
    color: red;
}

不起作用，你需要做：

ul a {
    color: red;
}

如果你只是想对Link组件进行样式化，那么根据我的经验，通常的方法是创建一个样式化的组件，如下所示：

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

然后将其渲染为<NavLink>Home</NavLink>。
这也使得重用这个样式化的组件变得容易。

enter code here

const Nav = styled（Link）color: white; text-align: left; background: teal;在这里输入代码width: 100%;;