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

Question

我的 Navlink 按钮的事件类有问题我的代码如下所示:

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

NavLink isActive 不知何故无法正常工作。只有当我点击按钮时，它才会将类更改为事件状态，但在我释放按钮后它又不再事件。

按钮样式组件:

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;
  }

`;