AgGrid中如何为展开状态的分组行设置样式？

你的getRowClass函数没生效，核心问题是没先判断当前节点是否为分组行——普通行也会存在expanded属性（值为undefined），导致分组行的样式判断逻辑没被正确命中；另外AgGrid自带样式优先级较高，需要确保自定义CSS选择器足够具体。

解决方案1：修正getRowClass函数 #

先判断节点是否为分组节点，再根据展开状态返回对应类名：

const getRowClass = (params) => {
  // 仅对分组节点应用样式
  if (params.node.group) {
    return params.node.expanded ? "group_open" : "group_close";
  }
  // 普通行返回空或自定义样式
  return "";
};

解决方案2：用rowClassRules简化配置 #

AgGrid支持直接通过rowClassRules配置样式规则，无需单独编写函数：

const rowClassRules = {
  'group_open': params => params.node.group && params.node.expanded,
  'group_close': params => params.node.group && !params.node.expanded
};

将上述规则配置到GridOptions的rowClassRules字段即可。

确保CSS样式优先级 #

由于AgGrid自带行样式（如.ag-row），需要通过提高选择器权重让自定义样式生效：

/* 展开状态分组行样式 */
.ag-row.group_open {
  background-color: #e8f4f8;
  font-weight: 600;
}

/* 折叠状态分组行样式 */
.ag-row.group_close {
  background-color: #f5f5f5;
  font-weight: 400;
}

如果使用Vue/React等带scoped样式的框架，需将样式放在全局样式文件中，或者使用深度选择器（如Vue的::v-deep、React的:global()）确保样式穿透生效。

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