如何从 react-dom-router 模块设置 Link 的样式？

Question

我正在尝试专门设置样式 :visited，但它没有效果。在我看来，当组件被渲染时，它的状态是：visited.

export const Hyperlink = styled(Link)`
  font-size: 0.8rem;
  font-weight: bolder;
  margin: 0 2rem 0 2rem;
  color: #b3b3b3;

  :visited {
    color: red;
  }

  :hover {
    color: white;
    transition-duration: 0.3s;
  }
`;

Answer 1

正如您在 simple example of the docs 中看到的那样。

您在 hover 和 visited 之前忘记了 &。

export const Hyperlink = styled(Link)`
  font-size: 0.8rem;
  font-weight: bolder;
  margin: 0 2rem 0 2rem;
  color: #b3b3b3;

  /* added & */
  &:visited {
    color: red;
  }

  /* added & */
  &:hover {
    color: white;
    transition-duration: 0.3s;
  }
`;

Answer 2

要设置活动 link 的样式，您可以像这样向活动 class 添加一个 class

<NavLink to="/path" activeClassName="selected">
    Link
</NavLink>

这会将 class 选择添加到当前选择的选项卡。

或者您可以直接设置样式

<NavLink
    to="/path"
    activeStyle={{=
        color: "red"
    }}
>
  Link
</NavLink>

请注意，您需要使用 NavLink 组件。

查看文档 here

Answer 3

使用&

export const Hyperlink = styled(Link)`
...

  &:visited {
   ...
  }

  &:hover {
    ...
  }
`;

Answer 4

我设法做到了，对于那些想知道的人，我做了以下事情：

索引：

 <Hyperlink
            key={info.name}
            exact
            to={info.to}
            activeStyle={{ color: "white" }}
          >
            {info.name}
          </Hyperlink>

样式

  export const Hyperlink = styled(NavLink)`
      font-family: "Circular-Bold";
      font-size: 0.8rem;
      color: ${Colors.greyLight};
      text-transform: uppercase;
      letter-spacing: 0.16em;

      &:hover {
        color: white;
      }

      &.active {
        &::after {
          content: "";
          height: 0.13rem;
          width: 2rem;
          background-color: ${Colors.greenLight};
          display: block;
          margin: 0.4rem auto;
        }
      }
    `;

我根据文档使用了 activeStyle 属性并且还注意到它在激活的 NavLink 中创建了一个名为“active”的 class，所以我用它来创建内容。

如何从 react-dom-router 模块设置 Link 的样式？

How to style Link from the react-dom-router module?

reactjs

styled-components

react-router-dom