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

Styled component:

import { NavLink } from 'react-router-dom';

export const MyNavLink = styled(NavLink)`
  &.${props => props.activeClassName} {
    color: red;
  }
`;

Usage:

Dashboard

Tested with:

react-router-dom 5.1.2
styled-components 5.0.1