DEV Community

Cover image for NavLink active ClassName using styled-components
Rom858
Rom858

Posted on

NavLink active ClassName using styled-components 

npm i styled-components react-router-dom
or
yarn add styled-components react-router-dom
Enter fullscreen mode Exit fullscreen mode

slyled-navlink.js 


import styled from "styled-components"


export const StyledNavLink=styled(NavLink).attrs({activeClassName:"anyClassName"})`
color: black;
&.anyClassName{
color: red;
}
`;
Enter fullscreen mode Exit fullscreen mode

*Note activeClassName accept string as className when NavLink is active so you can pass any className you like

Top comments (0)

Read next

inder4code profile image

Releasing Tailor4Job via npm

Inderpreet Singh Parmar -

lukachi profile image

Implement WitnessCalc in native apps Pt.2

Phat -

bsorrentino profile image

From Audio to Diagram

bsorrentino -

udayrana profile image

Publishing To NPM For The First Time

Uday Rana -