Ag-Grid React自定义选中行样式不生效问题求助

你的选中行背景色不生效，核心原因是用错了Ag-Grid的选中行样式选择器：

• 你写的.ag-selected-row-background-color并不是Ag-Grid官方定义的类名，这个类不存在，所以样式不会生效。
• Ag-Grid中，选中行的正确类是.ag-row.ag-row-selected，同时因为主题自带的样式优先级较高，需要加上!important强制覆盖。

修改后的sx配置如下：

<Paper className="ag-theme-material"
sx={{
  width: "100%",
  height: "100%",
  " .ag-checkbox-input-wrapper.ag-checked::after": {
    color: theme.general_theme.purpleBlue,
  },
  // 修正选中行样式
  " .ag-row.ag-row-selected": {
    backgroundColor: "green !important"
  }
}}>
<AgGrid></AgGrid>
</Paper>

另外补充：如果你的Ag-Grid开启了rowSelection="multiple"或者rowSelection="single"，确保行选择功能正常启用，否则选中行的类不会被添加到DOM上，样式自然也不会生效。

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