Use 'active' state from React Router in Styled Components

Question

React Router adds an active class to NavLinks when you are on the page that they link to. How can I access this property with Styled Components. I need to styled me

Answer 1

As of react-router v4, you can style the active state of NavLink without any dependencies using activeClassName and Styled Components' attrs() function:

export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`

  &.${activeClassName} {
    background: red;
  }
`;

Related documentation:

• activeClassName
• attrs()