使用样式化组件设计路由器链接的样式

Question

使用以下代码中的样式组件库来设置链接样式的最佳方法是什么。我可以找到很多使用锚标记的示例，但没有一个可以使用 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;
    }
  }
`;

感谢约瑟夫·沙纳汉

Answer 1

是的，感谢您的帮助。我将实现的精简版如下。它还具有我不必实现无序列表的优点。

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

感谢约瑟夫·沙纳汉

Answer 2

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

ul {
    color: red;
}

不起作用，你需要这样做：

ul a {
    color: red;
}