NavLink change button color only on click moment but not setting it up

Question

I have problem with Navlink button's active class my code look like this:

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

Somehow NavLink isActive isn't working. Only when I click on button it changes class to active, but it becomes not active again after I release the button.

Button styled-component:

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;

Maybe someone could help?

active means when you click on the button, or select it with keyboard and press space or enter right? is'n't it expected behavior ? — Mojtaba Hn, Feb 01 '19 at 14:10

score 1 · Accepted Answer · answered Feb 01 '19 at 17:44

The standard class given by react router to the element <NavLink /> is active (you can control the given class with activeClassName="customClass").

You would therefore need to style a button wrapped in a link with class .active. Like this:

const Button = styled.button`

   /* ... your other styles */

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

`;

NavLink change button color only on click moment but not setting it up

1 Answers1