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

If you are using object syntax in styled-components, you can implement the next solution:

const activeClassName = 'nav-item-active'

export const StyledLink = styled(NavLink).attrs({
    activeClassName,
})(props => ({
    height: '20px',
    width: '20px',
    backgroundColor: 'green',
    ['&.' + props.activeClassName]: {
        backgroundColor: 'red'
    }
}))

• Declare variable with the name of the active class of react router
• Style the NavLink and pass as attribute activeClassName
• From the props get the activeClassName
• Declare the conditional styles in case of the activeClassName being present

You can check a live example in the next StackBlitz project:

https://stackblitz.com/edit/react-hcudxz