styled-components如何实现链接hover时修改自定义Area组件颜色

问题原因 #

两个写法异常分别对应两个核心问题：

1. 直接在styled模板字符串里插值引用${Area}报类型错误，是因为自定义组件默认不支持styled-components的组件选择器：styled-components要通过组件引用定位到DOM节点，要求自定义组件必须接收className属性，并且把这个属性透传到自身渲染的根DOM元素上，没有做这一步就会触发TS重载报错。
2. 写a { &:hover { ... } }样式不生效，一是因为选择器只匹配到a标签本身，没有选中内部嵌套的Area组件；二是你通过backgroundColor="blue"给Area设置的是内联样式，CSS优先级高于普通类选择器，就算匹配到元素也会被内联样式覆盖。

修复步骤 #

1. 首先让Area组件支持className透传
   如果Area是普通函数组件，必须增加className入参，并且绑定到根渲染节点：

interface AreaProps {
  backgroundColor?: string;
  children?: React.ReactNode;
  className?: string; // 必须声明接收className
}
const Area = ({ backgroundColor, children, className }: AreaProps) => {
  // 将className挂载到实际渲染的DOM上
  return (
    <div className={className} style={{ backgroundColor }}>
      {children}
    </div>
  );
};

如果直接把Area改成styled组件，会自动支持组件选择器，不需要手动透传className，是更推荐的写法：

const Area = styled.div<{ backgroundColor?: string }>`
  background-color: ${(props) => props.backgroundColor || "transparent"};
`;

2. 解决样式优先级问题
   如果你保留Area的内联样式写法，hover样式需要提权才能覆盖内联样式：

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

如果你已经把Area改成styled组件，直接写正常的hover样式即可，不需要加!important，因为此时默认蓝色背景也是CSS类选择器级别，hover状态的样式优先级更高可以正常覆盖。

3. 适配Next.js Link组件
   Next.js 13+版本的Link组件会自动给直接子元素注入<a>标签属性，建议把YellowLink从styled.div改成styled.a，避免出现多余的DOM嵌套导致hover触发范围不符合预期。

完整可运行示例 #

import Link from "next/link";
import styled from "styled-components";

interface AreaProps {
  backgroundColor?: string;
}
const Area = styled.div<AreaProps>`
  background-color: ${(props) => props.backgroundColor || "transparent"};
  padding: 8px 16px;
`;

const Name = styled.span`
  color: #000;
`;

interface ShowFieldProps {
  link: string;
  name: string;
}

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

const YellowLink = styled.a`
  text-decoration: none;
  display: inline-block;
  &:hover ${Area} {
    background-color: yellow;
  }
`;

内容的提问来源于stack exchange，提问作者Alpin Cleopatra