使用 styled-components 设置 Router Link 的样式答案

【问题标题】：Styling a Router Link with styled-components使用 styled-components 设置 Router Link 的样式
【发布时间】：2020-04-04 21:58:58
【问题描述】：

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

谢谢约瑟夫·沙纳汉

【问题讨论】：

标签： javascript css reactjs react-router-dom styled-components

【解决方案1】：

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

ul {
    color: red;
}

行不通，你需要这样做：

ul a {
    color: red;
}

【讨论】：

【解决方案2】：

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

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

查看这个answer，很熟悉。

【讨论】：

【解决方案3】：

如果您只想设置 Link 组件的样式，那么根据我的经验，通常的方法是创建一个样式组件，如下所示：

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

然后像<NavLink>Home</NavLink>一样渲染它。

这也使得重用这个样式化的组件变得很容易。

【讨论】：

【解决方案4】：

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

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

感谢约瑟夫·沙纳汉

【讨论】：