Style active state of Links in Styled Components

Handling ActiveClassName with React Router

The activeClassName property is used to give a CSS class to an element when it is active. The default given class is active. This will be joined with the className prop, see NavLink Docs. A simple implementation would look like this:

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

// ... some other code

<NavLink to="/" activeClassName="selected">
     Home
</NavLink>

<NavLink to="/blog" activeClassName="selected">
     Blog
</NavLink>

<NavLink to="/about" activeClassName="selected">
     About
</NavLink>

A different style can be applied on the navigation link with the selected CSS class.

.selected {
  color: #ff0000; // red
}

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

Another option to the style the active route would be to use the activeStyle property on NavLink. It applies the styles when NavLink is active, see example below:

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: #ff0000, // red
  }}
>
  FAQs
</NavLink>

Styled Components Approach

Styled components are visual primitives to style your React App, see github.

To use the activeClassName property from react-router you have three options:

1. Styled Components attrs method
2. Passing activeClassName as styled component prop
3. Using activeStyle from react-router

.attrs Method

The .attrs method is a chainable method that attaches some props to a styled component. The first and only argument is an object that will be merged into the rest of the component's props. The attrs object accepts the following values:

export const StyledNavLink = styled(NavLink).attrs({
  activeClassName,
})`
  &.${activeClassName} {
    color: red;
  }
`;

<StyledNavLink activeClassName="any" />;

Passing activeClassName property

A Styled Component passes all HTML attributes if it is a simple element, like a div or button or ..., and all props if it is a React Component.

To get the activeClassName pass it as a prop and get it in the styled component and apply the conditional styles.

export const StyledLink = styled(NavLink)`
  color: blue;

  &.${props => props.activeClassName} {
    color: red;
  }
`;

<StyledLink activeClassName="any" />;

Using activeStyle

react-router has the activeStyle prop for styling active links.

const StyledActiveLink = styled(NavLink)`
  color: blue;
`;

<StyledActiveLink
  activeStyle={{
    color: 'red',
  }}
></StyledActiveLink>;

TL;DR

There are three options to use the activeClassName in your styled components.

1. attrs method
2. Passing activeClassName as prop
3. Using activeStyle

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut. If you want to know more about React, have a look at these React Tutorials.

References (and Big thanks):

React Router, Stack Overflow