我正在使用反應網格，我想為每一行設定不同的懸停顏色和 rowSelectedColor，當我嘗試覆寫懸停背景顏色時，它適用于每一行而不是每一行。
example - https://plnkr.co/edit/UwszBQxteLy9vPE3
我嘗試使用 rowClassRule 來實作該功能，但它沒有用，我希望行應該有自己獨特的懸停顏色和根據某些條件選擇的背景顏色，例如：age>10 然后懸停顏色：紅色
uj5u.com熱心網友回復：
您的代碼對我來說似乎有效，您只是沒有將正確的類名傳遞給您的其他規則。
這是編輯的代碼，有一個新類
// 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524574.html