Effect to selected link gastby styled-component - reactjs

Question

I have a header and I want to mark the link currently by selecting.
With Styled-Component I must write something like: Const NavLink = styled (link) ... But with the properties of the NAV element there is one that is called ActiveClassname and it can be put on an already defined class, my question is how I define that Independent class with Styled-Component.
I would like to create a class that is called something like Linkactive and that can happen something so ActiveClassname = "Linkactive". But I have not been able to.
code of navMenu
<NavMenu>
{menuData.map((item, index) => (
<NavLink to={item.link} key={index} activeClassName="active">
{item.title}
</NavLink>
))}
</NavMenu>
code with styled-component
const NavMenu = styled.div`
display: flex;
align-items: center;
/* margin-right: -48px; */
#media screen and (max-width: 768px) {
display: none;
}`
const NavLink = styled(Link)`
color: #00286d;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
`

Answer 1

You can define static props/attributes using .attrs
This is a chainable method that attaches some props to a styled
component.
const NavLink = styled(Link).attrs(() => ({
activeClassName: "LinkActive",
}))`
color: #00286d;
display: flex;
align-items: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
cursor: pointer;
&.LinkActive {
// Apply active style here
}
`

Answer 2

If you wanted to use the activeClassName. You can create a class selector on the styling of your NavMenu.
That way, it would only affect .active class of direct/deep child nodes of your NavMenu
const NavMenu = styled.div`
display: flex;
align-items: center;
& .active {
// whatever styling you want
}
#media screen and (max-width: 768px) {
display: none;
}
`;