reactjs: I have no idea how to render these components with styled-components - reactjs

Question

render the BarItem and BarItemSelect inside the link when the is true, they are all set precisely an using a css class, now it's two components...
I don't see a way to do this
const S = {
BarItem: styled.a`
position: relative;
display: block;
height: 3rem;
text-decoration: none;
cursor: pointer;
border: 0;
`,
BarItemSelected: styled.a`
font-weight: 500;
color: var(--dark-text-color);
filter: invert(1);
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px 5px 0 0;
bottom: 0;
#media (max-width: 63.8rem) {
color: var(--dark-text-color);
filter: invert(1);
background-color: #000;
top: 0;
border-radius: 0 0 5px 5px;
}
}
`,
const SmartLink = ({ href, test, children, ...props }) => {
const router = useRouter();
const isActive = test ? new RegExp(test, 'g').test(router.pathname) : false;
return (
<Link
href={href}
{...props}
>
<a
className={
isActive
? `${styles.barItem} ${styles.barItemSelected}`
: styles.barItem
}
>
{children}
</a>
</Link>
);
};
I can't solve this... does anyone have any suggestions on how I can do it?

Answer 1

The code above is not clear but I'll try to write a pattern in which styled components are used.
styled component
import styled from "styled-components";
const BarItem = styled.a `
position: relative;
display: block;
height: 3rem;
text-decoration:
none;
cursor: pointer;
border: 0;
`;
const BarItemSelected = styled.a`
font-weight: 500;
color: var(--dark-text-color);
filter: invert(1);
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px 5px 0 0;
bottom: 0;
#media (max-width: 63.8rem) {
color: var(--dark-text-color);
filter: invert(1);
background-color: #000;
top: 0;
border-radius: 0 0 5px 5px;
}
}
`;
Then in the component
import { NavLink} from "react-router-dom";
return (
<NavLink className={isActive
? BarItemSelected
: BarItem} to={href}>
>
{children}
</a>
</NavLink>
);
Please try the above code, if it does'nt work please comment, I'll make the neccessary changes.