如何设置 AG-GRID 列垂直边框的样式

Question

我希望我的 AG-Grid 列具有垂直边框。默认情况下，网格行具有水平边框。我希望它模仿常规 Excel 电子表格的外观。

我试过在列定义中使用单元格样式，如下所示：

this.columnDefs = [
  { headerName: 'Test', cellStyle: {'border-right-color': '#e2e2e2'}, field: 'test' }];

这样就可以了。但是当我点击一个单元格进行编辑时，它放在活动单元格上的蓝色边框被上面的单元格样式覆盖，所以我得到一个有 3 个蓝色边框和 1 个灰色边框的单元格。

这不是正确的方法....

有人有什么想法吗？我试图做一些 CSS 样式，但没有任何进展，因为似乎很难弄清楚要覆盖哪个 类。

Answer 1

最好通过设置 ag-grid 主题的样式来完成。这是关于它的文档 https://www.ag-grid.com/javascript-grid-themes-customising/

我制作了一个带边框的简单 Stackblitz Borders Example，您可以查看。