如何在AgGrid中修改选中行的行颜色与文本颜色

开发者阿泽

2026-8-1

解决AgGrid选中行内链接未随文本变白的问题

问题出在AgGrid选中行的默认样式不会自动覆盖<a>标签的原生样式——链接有自己独立的颜色规则，优先级比行的color属性高，所以单独设置行文本白色没用。

给你两种可行的解决办法：

方法一：自定义选中行类（推荐，避免全局污染）

先在AgGrid配置里给选中行添加自定义类：

const gridOptions = {
  rowSelection: 'single', // 按需选择single/multiple
  getRowClass: (params) => {
    return params.node.isSelected() ? 'green-selected-row' : '';
  },
  // 其他grid配置...
};

然后写对应的CSS，同时覆盖行和链接样式：

/* 设置选中行的绿色背景和白色文本 */
.green-selected-row {
  background-color: #2e7d32 !important; /* 可替换成你想要的绿色色值 */
  color: white !important;
}

/* 强制选中行内的链接变为白色 */
.green-selected-row a {
  color: white !important;
  /* 可选：保留链接下划线，或者去掉 */
  text-decoration: underline;
}

方法二：直接覆盖AgGrid默认选中行类

如果不需要自定义类，直接针对AgGrid原生的ag-row-selected类修改：

.ag-row-selected {
  background-color: #2e7d32 !important;
  color: white !important;
}

/* 单独处理选中行内的链接 */
.ag-row-selected a {
  color: white !important;
}