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

我对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;

也许有人可以帮忙？

最佳答案

由React Router赋予元素<NavLink />的标准类是active（您可以使用activeClassName="customClass"控制给定的类）。

因此，您将需要为包装在类.active的链接中的按钮设置样式。像这样：

const Button = styled.button`

   /* ... your other styles */

  .active & {
      background: #71c1a1;
      color: white;
  }

`;

关于css - NavLink仅在单击时更改按钮颜色，而不进行设置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54480942/