如何使用 styled-components 来设置 React-Router 链接的样式

如果你刚刚开始使用 React-Router 轻松地在 React-web 应用中路由页面，并且还在使用 Styled-components，那么恭喜你——这篇文章正适合你。在本文中，我将通过三种主要的样式方法，解释如何轻松地为 React-Router 链接添加样式。

目标- 编写出可重复使用的高效、清晰的代码，这可以在我们扩大应用程序时为我们提供帮助。

注意：假设你已经知道如何在基本层面上使用 React Router 和 styled-components

方法 1：使用内联样式属性设置链接样式。

//Nav.js  

import { Link } from "react-router-dom";
import styled from "styled-components";

const NavUnlisted = styled.ul`
  text-decoration: none;
`;

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: 'blue'
};

function Nav() {
  return (
    <NavUnlisted>
      <Link to="/" style={linkStyle}>
        Home
      </Link>
      <Link to="/about" style={linkStyle}>
        About
      </Link>
    </NavUnlisted>
  );
}

export default Nav;

解释：您有以下代码。它包含一个名为 的“无序导航列表”组件NavUnlisted。但我们先把重点放在Link组件上吧。现在的问题是，您无法通过Link这种方式直接使用样式化组件来设置 的样式。为什么？因为在底层，Link只是一个<a>我们从样式化组件中导入的锚标签或标签。所以我们无法用它创建常量变量Link。

const Link = styled.a``;  //error - **Link** already has been declared

解决方案：使用inline style attribute。这些基本上与我们在 HTML 中使用内联样式的方式类似。因此，我们style以对象形式创建一个包含样式的属性。

结论：这不是一个好方法，因为随着应用程序的扩展，编写代码和跟踪单个样式将变得困难 - 而且，它不符合我们在文章开头提出的目标的标准。

如果您有兴趣快速浏览一下 METHOD-1 的代码，并且愿意的话，这里有一个Codesandbox链接，您也可以跟着一起看。

方法 2：使用“styled.componentName”格式设置链接样式。

如果您熟悉样式组件，您应该知道这styled就像您从样式组件中导入的最基本的东西。styled与“tagNames”（例如 div 或 li 或 h1 等）或有效的组件名称一起可用于将样式应用于组件。

我们之所以可以使用后者，即组件名称，是因为我们在这里导入了一个组件，即Link，现在我们可以Link像这样传递它：

const StyledLink  = styled(Link)`
     //some CSS styles here
`;

解释：我知道这有点棘手，但还是照着做吧。我们基本上是创建一个新组件，然后告诉它：“嘿，我是一个新的组件，我想像 Mr.Link 一样，但要更时尚一些，所以我要继承 Mr.Link 的所有特性，并添加一些我自己的风格。” 最终的代码如下所示：

const StyledLink = styled(Link)`
  color: Blue;
  text-decoration: none;
  margin: 1rem;
  position: relative;
`;

function Nav() {
  return (
    <NavUnlisted>
      <StyledLink to="/">Home</StyledLink>
      <StyledLink to="/about">About</StyledLink>
    </NavUnlisted>
  );
}

解决方案：现在您可以Link通过创建另一个组件实例（即 StyledLink）直接设置样式，然后将样式应用于它。

结论：这种方法比方法 1 更简洁，因为与之前的方法不同，我们实际上是在编写 CSS。我的意思是，在方法 1 中，我们必须使用textDecoration而不是text-decoration。你现在才注意到这一点吗？太棒了！

方法 3：使用“NavLinks”和“activeClassNames”设置 React-Router 链接的样式。

好吧好吧，就在这时，我发现了一些非常有趣的事情，促使我写了这篇文章。React-Router 有一个名为 的模块NavLinks，我们可以将其用作组件。你可能会问，它有什么特别之处？嗯，它是专门为在 React-Router 中使用的链接样式而构建的。NAVLINK由 REACT-ROUTER 提供，而不是 STYLED-COMPONENTS 提供。好吧，一段话就说了这么多。总之，让我们开始看代码，但要注意这里有一些重大的变化：

import { NavLink } from "react-router-dom";  

const NavUnlisted = styled.ul`

  display: flex;

  a {
    text-decoration: none;
  }

  li {
    color: red;
    margin: 0 0.8rem;
    font-size: 1.3rem;
    position: relative;
    list-style: none;
  }

  .current {
    li {
      border-bottom: 2px solid black;
    }
  }
`;


function Nav() {
  return (
    <NavUnlisted>
      <NavLink to="/" activeClassName="current" exact>
        <li>Home</li>
      </NavLink>
      <NavLink to="/about" activeClassName="current" exact>
        <li>About</li>
      </NavLink>
    </NavUnlisted>
  );
}

说明：基本上，NavLink这是一种特殊的样式，Link当它与 URL 中的某个路径匹配时，我们可以向其添加样式。因此，如果我当前位于“/”，即主页，我可以将样式 border-bottom 应用于“主页”链接，如果我位于“/about”路径，则将样式应用于“关于”链接。它看起来像这样：

• activeClassName是一个属性，我们可以用它来创建一个类，之后可以为其应用样式。在我们的例子中，我们使用了.currentandli标签，当 URL 路径发生变化时，为相应的链接添加一个 border-bottom 属性。

• exact使用关键字是为了专门针对当前选定的 URL。因此，如果路径是“/”，则样式将仅应用于主页。请尝试删除确切的 URL，亲自查看效果。

解决方案：使用 NavLink，我们可以节省时间，无需编写任何 JavaScript 代码来触发当前选择并应用相应的样式。相反，我们可以直接使用 React-Router 提供的 NavLink。

结论：当您想要应用某些特定样式时（例如，当前选择链接时等），此方法是有效的。

方法 - 4：为方法 - 3 编写更简洁的代码 [奖励部分]

const NavUnlisted = styled.ul`
  display: flex;
  a {
    text-decoration: none;
  }
  li {
    color: red;
    margin: 0 0.8rem;
    font-size: 1.3rem;
    position: relative;
    list-style: none;
  }

  .current {
    li {
      border-bottom: 2px solid black;
    }
  }
`;


const links = [
  {name: "Home",path:"/"},
  {name: "About",path:"/about"},
];

function Nav() {
  return (
    <NavUnlisted>
      {links.map((link,index) => (
        <NavLink key={index} to={link.path} exact activeClassName="current">
          <li>{link.name}</li>
        </NavLink>
      ))}
    </NavUnlisted>
  );
}

说明：我们这里做的事情很简单，但如果我们以后想要轻松添加或更改链接，它可以节省大量时间。只需创建一个包含所有所需对象的新数组，然后“映射”它们即可。差不多就是这样。

结尾

希望你学到了一些新东西。如果你发现本文有任何错误或失误，请随时指出。等等……你还有更好的方法来实现上述方法吗？请在下方评论区留言告诉我😃

动图

我知道我知道！

参考：

• styled - 样式化组件
• NavLink - React 路由器

在Codesandbox中查找所有方法的完整代码。别忘了取消每个方法的注释 😉

这是给 Twitter 用户的 - 找到我@fluffyRidz