ag-Grid如何给元素添加css答案

【问题标题】：How does ag-Grid add css to elementsag-Grid如何给元素添加css
【发布时间】：2018-05-05 01:01:06
【问题描述】：

当我在 ag-Grid 中将鼠标悬停在某个元素上时，例如一行，我注意到它添加了一些内联 CSS 来突出显示该元素。例如，当元素未被选中时，html 如下所示：

<div class="ag-full-width-viewport" role="presentation" 
style="border-right: 0px solid transparent;"> == $0

但是，当我将鼠标悬停在此元素上时，它会自动突出显示并添加内联 css：

<div class="ag-full-width-viewport" role="presentation" 
style="border-right: 0px solid transparent: border-bottom: 0px solid 
transparent;"> == $0

我想知道 api 究竟是如何做到这一点的。我在源代码的哪里可以看到这个逻辑？我想知道将我自己的 css 添加到网格中的特定元素的目的......而不是使用 api 的 getRowClass() 等。

【问题讨论】：

【解决方案1】：

大概是这样的：

通过此搜索找到：

如果需要，您可以使用浏览器开发工具对其进行调试。例如，在 Chrome 的开发者工具中，您可以右键单击指定为 $0 的元素（在您的问题中），然后“中断... -> 属性修改”。一旦style 属性发生变化，您就会看到它的来源。

我确实觉得你的问题有点像XY Problem...

【讨论】：

你是正确的，这个问题是一个 xy 问题。这是因为 getRowClass() 和 rowClassRules() 不能按预期工作。它将 css 类应用于 html 层次结构的顶部，而不是您单击的特定行。除了尝试复制他们在源代码中所做的事情之外，我没有看到任何其他方法。