Style active state of Links in Styled Components
Tags: react, styledcomponents
Published: 2021-03-16 00:38:21

---
title: Style active state of Links in Styled Components
published: true
date: 2021-02-17 00:00:00 UTC
tags: react, styledcomponents
canonical_url: https://www.mariokandut.com/how-to-style-active-links-in-styled-components/
---

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#handling-activeclassname-with-react-router)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](https://reactrouter.com/web/api/NavLink). 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
}
```

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>
```

[💰: Start your cloud journey with $100 in free credits with DigitalOcean!](https://m.do.co/c/29f238135b61)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#styled-components-approach)Styled Components Approach

Styled components are visual primitives to style your React App, see [github](https://github.com/styled-components/styled-components).

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

1. Styled Components [attrs](https://styled-components.com/docs/api#attrs) method
2. Passing activeClassName as [styled component prop](https://styled-components.com/docs/basics#passed-props)
3. Using [activeStyle](https://reactrouter.com/web/api/NavLink) from react-router

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#attrs-method).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" />;
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#passing-activeclassname-property)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" />;
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#using-activestyle)Using activeStyle

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

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

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

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)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](https://www.twitter.com/mariokandut)**. If you want to know more about **[React](https://www.mariokandut.com/tags/react)**, have a look at these [React Tutorials](https://www.mariokandut.com/tags/react).

References (and Big thanks):

[React Router](https://reactrouter.com/web/api/NavLink), [Stack Overflow](https://stackoverflow.com/questions/50208306/use-active-state-from-react-router-in-styled-components)