在ag-Grid中如何实现键盘导航时活动行颜色与选中行同步？

方法一：CSS统一样式 #

直接覆盖ag-Grid默认的活动行与选中行样式，让两者视觉效果一致：

• 针对ag-Grid标识活动行的ag-row-focus类和选中行的ag-row-selected类，设置相同的背景色
• 可选：同步活动单元格与选中单元格的边框等细节样式

示例代码：

/* 统一活动行与选中行的背景色 */
.ag-row-focus,
.ag-row-selected {
  background-color: #e6f7ff !important; /* 替换成你项目中选中行的实际颜色 */
}

/* 可选：统一活动单元格与选中单元格的边框样式 */
.ag-cell-focus,
.ag-cell-selected {
  border: 1px solid #1890ff !important; /* 匹配你项目的边框样式 */
}

!important用于确保自定义样式优先级高于ag-Grid默认样式，若你使用了自定义主题，直接对应主题色值即可。

方法二：同步活动行与选中行状态 #

通过配置网格属性或监听事件，让键盘导航时的活动行自动成为选中行，从逻辑上保证状态与样式统一：

1. 开启单选模式（rowSelection: 'single'），多选场景可调整为multiple并处理选中逻辑
2. 监听cellFocused事件，在单元格聚焦时选中对应行

示例React代码（其他框架逻辑通用）：

const handleCellFocused = (params) => {
  if (params.rowIndex !== null) {
    // 选中当前聚焦的行
    params.api.selectIndex(params.rowIndex);
  }
};

<AgGridReact
  rowSelection="single"
  onCellFocused={handleCellFocused}
  // 其他网格配置项
/>

这种方式不仅能解决样式问题，还能让选中状态与键盘导航的聚焦状态完全同步。

内容的提问来源于stack exchange，提问作者Matthew Holmes