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

【问题标题】：How to style AG-GRID column vertical borders如何设置 AG-GRID 列垂直边框的样式
【发布时间】：2020-10-03 21:06:46
【问题描述】：

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

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

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

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

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

有人有什么想法吗？我尝试做一些 CSS 样式，但一无所获，因为要弄清楚要覆盖哪些类似乎非常困难。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：