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

Posted 2023-02-22

【中文标题】使用 styled-components 设置 Router Link 的样式

【英文标题】：Styling a Router Link with styled-components

【发布时间】：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;
    
  
`;

谢谢 约瑟夫·沙纳汉

【参考方案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;
`;

感谢约瑟夫·沙纳汉