CODEWITHSUNDEEP
cssreactjsstyled-components
PrEto
PrEto

Reputation: 405

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

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?

Upvotes: 0

Views: 947

Answers (1)

Daniel Sixl
Daniel Sixl

Reputation: 2499

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

`;

Upvotes: 1

Related Questions