javascript - 使用样式化组件样式化路由器链接

在下面的代码中，使用样式化的组件库对链接进行样式化的最佳方法是什么。
我可以找到很多与锚标记一起使用的示例，但没有与React-router链接一起使用的示例。
我要去正确的方法。

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

谢谢
约瑟夫·沙纳汉

最佳答案

您的方法是正确的，但没有错，您只需传递组件引用即可，而不必使用ul。

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

选中此answer，它非常熟悉。

关于javascript - 使用样式化组件样式化路由器链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59288849/