React中如何向Styled Components传递鼠标悬停状态props？

你的代码有两个核心问题：

1. 所有导航项共用同一个mouseEnter状态，鼠标移到任意一个项上，所有项都会触发颜色变化，这不符合单个项独立hover的需求。
2. 其实完全没必要用额外state控制hover样式——Styled Components原生支持CSS伪类&:hover，不需要通过props传递状态。

方法一：直接用CSS伪类（推荐） #

这是最简洁的实现方式，直接在Styled Component里定义hover样式：

NavLinkItem.tsx

const NavLinkItem = styled("li")(({ theme }) => ({
    marginLeft: "7px",
    transition: "all .3s ease-in",
    color: "black",
    "&:hover": {
        color: theme.palette.primary.main
    }
}));

menuNave.tsx
移除多余的state和事件绑定：

{menuItems.map((item, i) => (
    <NavLinkItem key={i}>
        <Link
            href={item.path}
            style={{
                color: trigger ? "black" : "white",
                transition: "all .3s ease-in"
            }}
        >
            <Typography variant="body2">
                {item.label}
            </Typography>
        </Link>
    </NavLinkItem>
))}

方法二：如果确实需要用state控制（如联动其他逻辑） #

如果必须通过state来管理hover状态（比如和其他组件状态联动），要给每个导航项分配独立的状态：

menuNave.tsx
在循环内为每个项创建独立的hover状态，并把事件绑定到NavLinkItem上（比绑定在Link上更可靠）：

{menuItems.map((item, i) => {
    const [isHovered, setIsHovered] = useState(false);
    return (
        <NavLinkItem 
            key={i} 
            isHovered={isHovered}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            <Link
                href={item.path}
                style={{
                    color: trigger ? "black" : "white",
                    transition: "all .3s ease-in"
                }}
            >
                <Typography variant="body2">
                    {item.label}
                </Typography>
            </Link>
        </NavLinkItem>
    )
})}

NavLinkItem.tsx
接收isHovered props来控制颜色：

const NavLinkItem = styled("li")<{ isHovered: boolean }>(({ theme, isHovered }) => ({
    marginLeft: "7px",
    transition: "all .3s ease-in",
    color: isHovered ? theme.palette.primary.main : "black",
}));

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