样式优化：全局Reset样式&下拉菜单激活状态
当组件功能基本完成后，样式问题会集中暴露出来。最常见的问题之一是：某个样式你确定没有写过，但它却出现了——比如按钮上莫名出现了 background-color: transparent。这种情况通常是全局 CSS Reset 或第三方库的样式污染导致的。本节讲解如何排查全局样式问题，以及如何正确设置下拉菜单的激活状态。
全局样式排查思路
当发现一个"不应该出现的样式"时，排查流程是：
1. DevTools 中检查目标元素
2. 在 Styles 面板中找到该样式的来源文件
3. 判断来源：
├── 自己的 CSS → 直接修改
├── Element Plus 默认样式 → 通过 :deep() 覆盖
├── CSS Reset（如 Tailwind Preflight）→ 调整 Reset 配置
└── 浏览器默认样式 → 添加覆盖规则
text
Tailwind Preflight 的影响
Tailwind CSS 的 Preflight（基于 modern-normalize）会重置所有元素的默认样式。常见影响包括：
| 元素 | Preflight 行为 | 可能的问题 |
|---|---|---|
| button | background-color: transparent | 按钮失去默认背景 |
| img | display: block | 图片下方出现间隙 |
| h1-h6 | 重置字体大小和加粗 | 标题样式丢失 |
| a | color: inherit | 链接颜色与文字相同 |
如果 Preflight 影响了 Element Plus 组件的样式，可以在 tailwind.config.ts 中关闭 Preflight：
export default {
corePlugins: {
preflight: false, // 关闭 CSS Reset
},
}
typescript
或者针对特定元素恢复样式。
下拉菜单的激活状态
下拉菜单（el-dropdown-item）在 hover 和 active 时需要明确的视觉反馈。
激活状态的 CSS 选择器
:deep(.el-dropdown-menu__item) {
// hover 状态
&:hover {
background-color: var(--el-dropdown-menuItem-hover-fill);
color: var(--el-dropdown-menuItem-hover-color);
}
// 激活状态（当前选中项）
&.is-active {
color: var(--el-color-primary);
font-weight: 500;
}
}
scss
全局 vs 组件级样式
激活状态的样式建议放在全局 CSS 中而非组件内部，原因是：
- 下拉菜单通过
teleport渲染到body下，不在组件的 DOM 树内。 - 组件的
scoped样式无法影响到 teleport 后的元素。 - 多个组件的下拉菜单样式应保持统一。
在 src/assets/styles/global.scss 中统一管理：
// 全局下拉菜单样式
.el-dropdown-menu__item.is-active {
color: var(--el-color-primary);
}
scss
样式调试工具
Chrome DevTools 的 Styles 面板中，每个样式规则右上角会显示来源文件和行号。点击可以跳转到源码位置（需要开启 source map）。对于 Tailwind CSS，可以使用浏览器扩展查看类名对应的 CSS 属性。
本节小结
- 全局样式排查：先在 DevTools 中定位样式来源，再决定修改策略。
- Preflight 影响：Tailwind 的 CSS Reset 可能影响 Element Plus 组件样式。
- 激活状态：下拉菜单的激活样式应放在全局 CSS 中，因为 teleport 机制。
- CSS 变量：优先使用 Element Plus 提供的 CSS 变量设置交互状态样式。
↑