Is there a way to extract styles to a variable when using react-router-dom's NavLink activeStyle prop? I want to avoid repeating the same styles without using a css file.
Ideally, I would prefer to achieve this using Emotion, but if that's not feasible, a regular variable would suffice.
Below is a sample of my code:
import { NavLink, useRouteMatch } from 'react-router-dom';
import { css } from '@emotion/react';
const navLinkStyle = css({
color: blue,
});
const navLinkActiveStyle = {
color: 'red',
};
Here is the element in question:
<NavLink
to='/home'
// activeClassName='selected' // I imagine this is for pure css styling, not css-in-js.
css={navLinkStyle} // Emotion css prop
activeStyle={navLinkActiveStyle}
>
Home
</NavLink>