Question

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

谢谢约瑟夫·沙纳汉（Joseph Shanahan）

Answer 1

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

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

对此answer进行检查，非常熟悉。

Answer 2

react-router link最终在<a>标签中转换为，因此以与设置<a>标签样式相同的方式对其进行样式设置因此，假设您需要将其颜色更改为红色，然后：

ul {
    color: red;
}

不起作用，您需要做：

ul a {
    color: red;
}

Answer 3

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

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

然后将其渲染为<NavLink>Home</NavLink>。

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

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

感谢约瑟夫·沙纳汉

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

4 个答案: