将 props 传递给 React 中的样式组件

Question

我有一个自定义样式的组件，我想将鼠标悬停传递给它，因为悬停选择器在“div”中是不可能的。

这是我尝试过的：

NavLinkItem.tsx：

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

menuNave.tsx：

const [mouseEnter, setMouseEnter] = useState(false);

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

但这不起作用。

所以，我的问题是，如何将 mouseEnter 传递给我的样式组件？

提前致谢...

Answer 1

看起来您正在尝试根据 mouseEnter 状态更改悬停时 NavLinkItem 组件的颜色。但是，您的代码中存在一些问题，可能会导致其无法按预期工作。

NavLinkItem 组件应该直接处理悬停效果，而不依赖于单独的 mouseEnter 状态。相反，您可以根据主题调色板直接在样式组件中定义悬停效果。 您应该在样式组件中使用“as”属性将其渲染为“div”元素，因为悬停效果不适用于“li”元素。

以下是如何修改代码来实现此目的：

import { styled } from "@mui/system";

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

// Usage
{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>
))}