<NavLink
to={rootPath + path}
activeClassName="active"
className={scss.navlink}
>
<ListItem button key={name}>
<ListItemIcon>
<Icon htmlColor="#E1F5FE" />
</ListItemIcon>
<ListItemText primary={name} />
</ListItem>
</NavLink>
In the snippet above, I have created a navlink class in my x.module.scss file as shown below:
.navlink {
color: inherit;
text-decoration: none;
}
.navlink:hover,
.navlink:active,
.navlink:visited {
text-decoration: none;
}
/* Styling for when the link is active */
.navlink.active {
background-color: #039BE5;
}
It's important to note that .navlink.active does not work as expected when used with *imported_class_navlink active in React.
What possible steps can be taken to enable the functionality of .navlink.active?
Additionally, the usage of .navlink > * doesn't appear to be effective either...