英文:
cell background color is not visible while selecting particular row on ag-grid
问题
I am currently working on agGrid.
在 ag-grid 上选择特定行时,无法看到单元格的背景颜色。
(这里行颜色会覆盖)。
请参考下面的屏幕截图:
AgGrid 版本 27.2.1
如果你们找到解决方案,对我非常有帮助。
提前感谢。
在选择行时,应该能看到单元格的颜色。
英文:
I am currently working on agGrid
Unable to see cell background color when i select particular row in ag-grid
(Here row color overrides).
check below screen shot for reference
AgGrid version 27.2.1
It's very helpful for me if you guys find the solution
Thanks in advance
Here cell color should be visible when we select row
答案1
得分: 1
根据您提供的图像,看起来您需要使用cellClass来向特定列的单元格添加类名。然后,您可以使用自定义样式表文件来操作该类的背景颜色。
示例:
// 演示: https://plnkr.co/edit/1NeMKcO0m2bqjI19?open=index.jsx&preview
import 'ag-grid-community/styles/ag-theme-alpine.css'; // 如果使用 alpine 主题
import 'ag-grid-community/styles/ag-grid.css';
import './styles.css';
...
// 提供单元格类
const columnDefs = [
// 为每一行返回相同的类
{
headerName: '静态类',
field: 'static',
cellClass: 'my-class'
},
// 为每一行返回相同的类数组
{
headerName: '静态类数组',
field: 'staticArray',
cellClass: ['my-class','my-class1'],
},
];
<AgGridReact columnDefs={columnDefs}></AgGridReact>
.ag-theme-alpine {
--ag-selected-row-background-color: green;
}
.my-class {
background-color: orange;
}
英文:
Based on the image you provided, it looks like you need cellClass to add a class name to cells in a specific column. Then, you can manipulate the background color of that class using a custom stylesheet file.
Example:
javascript
// Demo: https://plnkr.co/edit/1NeMKcO0m2bqjI19?open=index.jsx&preview
import 'ag-grid-community/styles/ag-theme-alpine.css'; // if using alpine theme
import 'ag-grid-community/styles/ag-grid.css';
import './styles.css';
...
// Provides cell class
const columnDefs = [
// return same class for each row
{
headerName: 'Static Class',
field: 'static',
cellClass: 'my-class'
},
// return same array of classes for each row
{
headerName: 'Static Array of Classes',
field: 'staticArray',
cellClass: ['my-class','my-class1'],
},
];
<AgGridReact columnDefs={columnDefs}></AgGridReact>
css
.ag-theme-alpine {
--ag-selected-row-background-color: green;
}
.my-class {
background-color: orange;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论