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

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.