在 Vaadin 22 中为网格中选定行中的组件设置样式

Question

我已经使用 link 向我的网格添加了一个组件列，呈现如下：

<vaadin-grid-cell-content slot="vaadin-grid-cell-content-39" draggable="true">
<flow-component-renderer appid="app">
#shadow-root
<style>...</style>
<slot>
    <a> reveal
</slot>
    <a href="#" focus-target="true">Link</a>
</flow-component-renderer>

我在组件文件夹中添加了 vaadin-grid.css，并对 selected 行进行了以下修改：

:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
background-color: green;
color: white;

}

现在我遇到的问题是 link 的颜色与背景颜色相匹配，并且在 selected 行时应该是白色。我尝试了几件事，但没有任何效果。

我最好的尝试是这个：

:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) ::slotted(*) {
font-weight: bold;
color: white !important;

}

selecting 时字体粗细显示为粗体，但颜色仍然是全局定义的 a-tag 的颜色。

我试图给 link 一个 class 名称，通过

给 select 它

:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) ::slotted(a.my-class-name)

但这根本行不通。

我也有 class 网格和 link 的名称，并试图通过 select 以某种方式通过

.grid-with-link tr[part~="row"][selected] vaadin-grid-cell-content a.grid-link {
color: white !important;

}

任何人都可以提示我还可以尝试什么吗？我更喜欢不为网格或列使用额外 class 名称或 link.

的解决方案

Answer 1

它是在单元格内开槽的 <vaadin-grid-cell-content> 元素。所以 ::slotted(*) 实际上不会以你在其中的 <a> 元素为目标。此外，全局范围（light DOM 侧）的样式比阴影 DOM (::slotted).

中定义的样式具有更高的特异性

我相信这种情况需要一个 CSS 自定义属性，您可以根据行的选定状态进行设置，然后将该自定义道具用于网格内的链接：

vaadin-grid.css:

[selected] {
  --link-color: white;
}

styles.css（全局范围）：

vaadin-grid a {
  color: var(--link-color, var(--lumo-primary-text-color));
}

在 Vaadin 22 中为网格中选定行中的组件设置样式

Styling a component in a selected row in a grid in Vaadin 22

vaadin

vaadin-flow

vaadin-grid