如何在ag-grid中的所选行上显示轮廓？

Question

当用户单击ag-grid中的单元格时，它会在所选单元格上显示蓝色轮廓。我想更改此设置，以便在选择该行中的任何单元格时整个行都显示为蓝色轮廓。

下图来自this question，该图说明了如何从特定列的单元格中删除蓝色选择轮廓。

从链接的问题中粘贴的上述代码为：

this.columnDefs = [
  { headerName: 'One', field: 'one' },
  { headerName: 'Two', field: 'two' },
  { headerName: 'I want no cell selection!', 
    field: 'three',   
    suppressNavigable: true,
    editable: false,
  }
];

我不是CSS专家，但这似乎是一个分为两部分的过程：

• 摆脱所有列的单个单元格轮廓
• 在所选的整个行上放置一个轮廓

所以...

1. 是否有一种简单的方法可以将linked question中提到的'no-border' cellClass应用于所有行/列，而无需将粘贴'no-border'粘贴到每个列标题？
2. 我将如何修改以使整个行在被选中时具有蓝色轮廓？

我已经浏览了this answer和this rowClass documentation，但是我的CSS似乎不足以正确地实现＃2。 （如果需要更多代码，请发表评论。我有一个TypeScript文件，该文件向Grid提供GridOptions [例如suppressCellSelection: true]。）

Answer 1

好的，因此我可以在CSS中从所有单元格中删除选择边框：

::ng-deep .ag-cell:focus{
  outline: none;
}

这是我能突出显示行的最佳方法。它与原始轮廓颜色不完全匹配，但是足够接近。

::ng-deep .ag-row-focus {
  outline: skyblue solid 2px;
  outline-offset: -2px;
}

（不确定::ng-deep对您的应用程序是否必要）

注意：用户可能无法通过此CSS更改来复制单个单元格内容。

如果您想出一种方法来复制问题图像中显示的确切单元格轮廓颜色，请分享。显然，根据this Github issue，它可能与Chrome有关。