Use 'active' state from React Router in Styled Components - react-router

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 menu items differently when you are on their page.
const LinkElem = styled(NavLink)`
font-size: 16px;
font-weight: 400;
${props => console.log(props)};
&:hover {
color: ${props => props.theme.colorOrange};
}
`;
const Menu = props => {
const { me } = props;
return (
<MenuElem>
<li>
{me ? (
<LinkElem to="/account">Account</LinkElem>
) : (
<LinkElem to="/login">Log in / sign up</LinkElem>
)}
</li>
</MenuElem>
);
};

Answer 1

The prop className is getting added to the children of NavLink and so its not accessible at NavLink level. The docs were not clear about this. Therefore, we cannot check for props.className === 'active' and add styles.
Instead, you could just resort to css inside styled components for your use:
const LinkElem = styled(NavLink)`
// example style
&.active {
color: ${props => props.theme.orange }
}
`;

Answer 2

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()

Answer 3

const StyledLink = styled(NavLink)`
color: blue;
&.active {
color: red;
}
`;

Answer 4

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

Answer 5

Styled component:
import { NavLink } from 'react-router-dom';
export const MyNavLink = styled(NavLink)`
&.${props => props.activeClassName} {
color: red;
}
`;
Usage:
<MyNavLink to="/dashboard" activeClassName="anyClassNameWillWork">Dashboard</MyNavLink>
Tested with:
react-router-dom 5.1.2
styled-components 5.0.1

Answer 6

The string you added to NavLink's activeClassName will join to className later when you hit the specific route. Since styled components support pure css,
&.{yourActiveClassName} { #css goes here}
should work.

Answer 7

I'm not particularly keen on the &.active approach if you're trying to build a styled-component that is router independent, so I created asNavLink to deal with this:
npm install as-nav-link --save
Given a component:
const MyNavAnchor = styled(({
as: T = 'a',
active, // destructured so it is not passed to anchor in props
...props
}) => <T {...props} />)({
textDecoration: 'blink',
color: 'blue',
}, ({ active }) => (active && {
color: 'red',
}));
You can use it like this:
import asNavLink from 'as-nav-link';
const MyNavLink = asNavLink(config)(MyNavAnchor);
And it will pass down the active prop to your styled component.
config is optional and can include an isActive function (as per ReactRouter's NavLink) and an activeProp string (the prop name that is passed to your component).

Answer 8

I think it's simplest decision.
const StyledLink = styled(NavLink)`
color: blue;
&.${props => props.activeClassName} {
color: red;
}
`;

Answer 9

react-router now has activeStyle props, which can be used to style active link easily:
<NavLink
to="/faq"
activeStyle={{
fontWeight: "bold",
color: "red"
}}
>
FAQs
</NavLink>
With styled-components:
const LinkElem = styled(NavLink)`
font-size: 16px;
font-weight: 400;
`;
<LinkElem
activeStyle={{
fontWeight: 'bold',
color: 'red',
}}
></LinkElem>;