UnoCSS 中使用 group 实现组件悬停样式联动

在使用 UnoCSS 和 element-plus 开发前端项目时，开发者经常会遇到需要实现组件悬停状态联动样式的需求。本文将详细介绍如何正确配置 UnoCSS 来实现这一功能。

问题背景

在开发过程中，我们希望在鼠标悬停在父组件（如 el-card）上时，其子组件（如 el-text）能够自动改变样式（如文字颜色）。这种交互效果在 UnoCSS 中通常可以通过 group 功能来实现。

常见错误实现方式

很多开发者会尝试以下写法：

<el-card class="group">
  <el-text class="group-hover:color-#008EED!">
    {{ item.title }}
  </el-text>
</el-card>

但实际效果却发现悬停时子组件样式并未改变。这是因为在 UnoCSS 的某些预设（如 preset-scalpel）中，group 功能并未被默认包含。

正确解决方案

要解决这个问题，需要在 UnoCSS 配置中显式引入基础预设 presetUno：

1. 首先在配置文件中导入基础预设：

import { presetUno } from "unocss"

2. 然后在 presets 数组中同时包含基础预设和你的自定义预设：

presets: [presetUno(), presetScalpel()]

实现原理

UnoCSS 的 group 功能基于 CSS 的父子选择器实现。当添加 group 类到父元素后：

1. 父元素悬停时会添加特定的伪类状态
2. 子元素通过 group-hover: 前缀可以捕获这一状态变化
3. UnoCSS 会自动生成相应的 CSS 选择器规则

最佳实践建议

1. 对于新项目，建议始终包含 presetUno 以确保基础功能的可用性
2. 可以通过 @apply 指令将多个悬停样式组合起来，提高代码可维护性
3. 注意样式优先级问题，必要时使用 !important（如示例中的 ! 后缀）

通过正确配置 UnoCSS 预设，开发者可以轻松实现组件间的悬停样式联动，大大提升用户交互体验。