如何为ag网格中的每一行自定义悬停颜色反应答案

【问题标题】：How to customize hover colour for each row in ag grid react如何为ag网格中的每一行自定义悬停颜色反应
【发布时间】：2022-11-01 22:15:57
【问题描述】：

我正在使用反应网格，我想为每一行设置不同的悬停颜色和 rowSelectedColor，当我尝试覆盖悬停背景颜色时，它适用于每一行而不是每一行。

example - https://plnkr.co/edit/UwszBQxteLy9vPE3

我尝试使用 rowClassRule 来实现该功能，但它没有用，我希望行应该有自己独特的悬停颜色和根据某些条件选择的背景颜色，例如：age>10 然后悬停颜色：红色

【问题讨论】：

标签： css reactjs ag-grid ag-grid-react

【解决方案1】：

您的代码对我来说似乎有效，您只是没有将正确的类名传递给您的其他规则。

这是编辑的代码，有一个新类

// main.js
const gridOptions = {
  rowData: getData(),
  columnDefs: [
    { headerName: 'Employee', field: 'employee' },
    { headerName: 'Number Sick Days', field: 'sickDays', editable: true },
  ],
  rowClassRules: {
    // row style function
    'warning': (params) => {
      var numSickDays = params.data.sickDays;
      return numSickDays > 1 && numSickDays <= 5;
    },
    // row style expression
    'breach': 'data.sickDays >= 5',
    'new': 'data.sickDays >= 7'
  },
};

对于你不需要把!important覆盖的样式，在使用!important之前尝试理解为什么你想要的样式不适用

// styles.css

.warning {
  background-color: sandybrown;
}
.warning:hover {
  background-color: purple;
}

// you set the class to 'blue' but the class did not exists in your style, so I set it to 'breach' because that's a class you had
.breach {
  background-color: lightcoral;
}
.breach:hover {
  background-color: black;
  color: white;
}

.new {
  background-color: greenyellow;
}

编辑和工作沙箱：https://plnkr.co/edit/CijuUinXkVUJkRFG

【讨论】：