Arco Design Vue 暗黑模式下 Table 组件选中行样式问题解析

问题现象

在使用 Arco Design Vue 2.56.3 版本的 Table 组件时，开发者在暗黑模式下发现了一个视觉样式问题：当表格行被选中后，该行右侧固定列(fixed=right)的背景会变得透明，导致视觉上的不一致性。

问题分析

这个样式问题主要出现在暗黑主题下，涉及以下几个关键点：

1. 选中行样式机制：Table 组件在被选中行上添加了特定的类名arco-table-tr-checked，用于标识该行已被选中。

2. 固定列背景处理：固定列(fixed columns)在表格滚动时需要保持位置固定，因此采用了独立的背景渲染方式。

3. 暗黑主题变量：问题根源在于暗黑主题下使用的 CSS 变量--color-fill-1，这个变量在选中状态下导致了固定列背景的透明度异常。

技术原理

在 Arco Design 的设计体系中：

• 表格选中行通常会有特殊的背景色来突出显示
• 固定列的实现依赖于position: sticky和独立的背景层
• 暗黑主题通过 CSS 变量覆盖来改变组件的颜色表现

当这些机制组合在一起时，由于变量继承和覆盖的优先级问题，导致了固定列背景的异常表现。

解决方案

临时解决方案

开发者可以通过覆盖 CSS 样式来临时修复这个问题：

.arco-table-tr-checked .arco-table-col-fixed-right {
  background-color: var(--color-bg-3) !important;
}

.arco-table-tr-checked .arco-table-col-fixed-left {
  background-color: var(--color-bg-3) !important;
}

这个方案：

1. 针对选中行的固定列
2. 使用var(--color-bg-3)作为背景色
3. 通过!important确保样式优先级

长期建议

对于框架维护者来说，更合理的修复方式应该是：

1. 检查暗黑主题下--color-fill-1的定义
2. 确保表格选中行样式与固定列样式的变量使用一致
3. 可能需要调整固定列背景的渲染层级

最佳实践

在使用 Arco Design Vue 的 Table 组件时，特别是涉及以下场景时：

1. 使用暗黑主题
2. 表格有固定列
3. 需要行选择功能

建议开发者：

1. 预先测试选中状态下的视觉效果
2. 了解框架的 CSS 变量体系
3. 准备好必要的样式覆盖方案

总结

这个案例展示了在复杂组件中，多种样式机制交互可能产生的视觉问题。理解框架的设计体系和 CSS 变量系统对于解决这类问题至关重要。开发者既可以通过临时覆盖解决问题，也应该关注框架的后续更新，以获得更完善的官方解决方案。