Resolved: How to change a component’s color with styled-components?

import Link from "next/link";
...

export const ShowField: React.FC<ShowFieldProps> = ({ link, name }) => {
  return (
    <Link href={link}>
      <YellowLink>
        <Area backgroundColor="blue">
          <Area>
            <Name text={name} />
          </Area>
        </Area>
      </YellowLink>
    </Link>
  );
};

const YellowLink = styled.div`
  &:hover ${Area} {
    background-color: yellow;
  }
`;

No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject |

const YellowLink = styled.div`
  a {
    &:hover {
      background-color: yellow;
    }
  }
`

// Create a styled link component...
const StyledLink = styled(Link)`
  background-color: ${(props) => props.backgroundColor};
  // Add any additional styles you need for the link

  &:hover {
    background-color: yellow;
  }
`;

// Usage
return (
  <StyledLink href={link} backgroundColor="blue">
    <Name text={name} />
  </StyledLink>
);