NavLink 仅在单击时刻更改按钮颜色，但不进行设置

Question

我对导航链接按钮的活动类有问题，我的代码看起来像这样：

<NavLink exact to="/"><Button>Page</Button></NavLink>

不知何故，导航链接处于活动状态不起作用。只有当我单击按钮时，它才会将类更改为活动状态，但在我释放按钮后它再次变得不活动。

按钮样式组件：

import styled from 'styled-components';
const Button = styled.button`
  width: 50%;
  height:35px;
  background: white;
  color: #71C1A1;
  padding: 0;
  border:none;
   &:active {
      background: #71C1A1;
      color: white;
    }
`;
export default Button;

也许有人可以帮忙？

Answer 1

react router 给元素<NavLink />给出的标准类是active（你可以用 activeClassName="customClass" 控制给定的类）。

因此，您需要使用类 .active 包装在链接中的按钮样式。喜欢这个：

const Button = styled.button`
   /* ... your other styles */
  .active & {
      background: #71c1a1;
      color: white;
  }
`;