如何在 Chakra UI 中使用这个伪 a::hover::after？答案

【问题标题】：How to use this pseudo a::hover::after in Chakra UI?如何在 Chakra UI 中使用这个伪 a::hover::after？
【发布时间】：2023-02-13 21:32:19
【问题描述】：

我正在尝试一些需要使用伪 a::hover::after 的 css 样式，我假设如 documentation 中所述因为我可以这样做来使用悬停伪：

<Link _hover={{//styles here}}/>

在同样的意义上使用hover::after应该是这样的：

<Link _hover_after={{//styles here}}/>

但它似乎不起作用，而且我在documentation 中找不到有关此特定用途的线索。如何在带有 Chakra UI 的 React 元素上使用伪 ::hover::after？

【问题讨论】：

标签： css reactjs jsx chakra-ui

【解决方案1】：

我以前遇到过这个问题，但找不到解决方案。但是我使用 isHovering 状态做了一个解决方法，所以当 onMouseOver 事件将它设置为真的和onMouseLeave你把它设置为错误的并添加条件样式。看一个例子：

const LinkElement = () => {
    const [isHovering, setIsHovering] = useState(false);

    return <Link 
                _after={ color: isHovering ? 'red' : 'blue' } 
                onMouseEnter={() => setIsHovering(true)}
                onMouseLeave={() => setIsHovering(false)}
            />
}

【讨论】：

谢谢！！那解决了，但我想知道，这会影响性能吗？
这不应该以真正重要的方式影响性能，因为它只是状态变化，仅此而已。

【解决方案2】：

它有点晚了，但建议的解决方案不起作用，如果你映射一个数组来显示你的组件并且它可能变得不干净，如果你多次使用它。我在 github repo 上找到了更好的解决方案。你可以简单地做

<Link 
   _hover={{
      _after: {
         //styles here
      },
}}/>

【讨论】：