'Styling a component in a selected row in a grid in Vaadin 22
I've added a component column to my grid with a link which renders as follows:
<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>
I've added the vaadin-grid.css in the components folder with following adaptions for a selected row:
:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
background-color: green;
color: white;
}
Now I have the problem that the color of my link matches the background color and should be white when the row is selected. I tried several things, but nothing worked.
My best try was this one:
:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) ::slotted(*) {
font-weight: bold;
color: white !important;
}
The font-weight is shown up bold when selecting, but the color is still the color of the global defined a-tag.
I tried to give the link a classname, to select it via
:host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) ::slotted(a.my-class-name)
but that does not work at all.
I also had class names for grid and the link and tried to select it somehow via
.grid-with-link tr[part~="row"][selected] vaadin-grid-cell-content a.grid-link {
color: white !important;
}
Can anyone give me a hint what else to try? I would prefer a solution without using an extra class name for the grid or column or link.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
