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

Стандартный класс, заданный маршрутизатором реакции для элемента <NavLink />, равен active (вы можете управлять данным классом с помощью activeClassName="customClass").

Поэтому вам нужно оформить кнопку, завернутую в ссылку, с классом .active.Как это:

const Button = styled.button`

   /* ... your other styles */

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

`;