Chakra UI中解决_hover与_active样式优先级问题

在Chakra UI框架中，开发者经常会遇到一个关于状态样式优先级的常见问题：当同时定义_hover和_active样式时，_hover样式会覆盖_active样式，这与原生CSS的行为不符。

问题现象

在原生CSS中，:active伪类选择器的优先级高于:hover。这意味着当用户点击元素时，即使鼠标仍然悬停在元素上，:active样式也会优先显示。然而在Chakra UI中，使用_hover和_active伪属性时，_hover样式却会覆盖_active样式。

问题根源

这个问题的根本原因在于Chakra UI的条件样式实现机制。_hover伪属性实际上映射到了两个CSS选择器：

1. @media (hover: hover)媒体查询
2. &:hover伪类选择器

而_active只映射到&:active伪类选择器。由于媒体查询的特殊性(specificity)较高，导致_hover样式最终覆盖了_active样式。

解决方案

方案一：使用原生CSS选择器

最直接的解决方案是绕过Chakra UI的伪属性系统，直接使用原生CSS选择器：

const CustomButton = chakra("button", {
  base: {
    "&:hover": {
      backgroundColor: "red",
    },
    "&:active": {
      backgroundColor: "green",
    },
  },
});

这种方法完全遵循原生CSS的优先级规则，确保:active样式在点击时优先显示。

方案二：修改Chakra UI条件配置

对于需要保持Chakra UI伪属性语法的项目，可以通过修改条件配置来解决：

import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';

const config = defineConfig({
  conditions: {
    active: '&&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])',
  },
});

const system = createSystem(defaultConfig, config);

这个配置通过增加选择器的特殊性(使用双&符号)来提升_active的优先级。

方案三：嵌套样式声明

虽然这不是最理想的解决方案，但在某些情况下可以临时使用：

{
  _hover: {
    bg: "blue.800",
    _active: {
      bg: "red.900"
    }
  },
  _active: {
    bg: "red.900"
  }
}

需要注意的是，这种方法需要重复声明_active样式，且键盘交互时可能不会触发_hover状态。

最佳实践建议

1. 优先使用方案一：直接使用原生CSS选择器是最可靠、最符合预期的解决方案。
2. 全局配置优于局部修复：如果项目规模较大，建议采用方案二进行全局配置。
3. 避免方案三：除非有特殊需求，否则不建议使用嵌套声明的方法，因为它可能导致不一致的行为。

总结

Chakra UI的这一行为差异源于其条件样式系统的设计选择。理解这一点有助于开发者做出更明智的样式决策。在大多数情况下，直接使用原生CSS选择器或调整条件配置都是可行的解决方案，开发者可以根据项目需求选择最适合的方法。