Vaadin 14 网格行条纹：我们如何反转颜色？

Question

我们可以使用以下代码添加一个 vaadin 14 网格行条纹。

grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);

但是偶数行显示背景图片，奇数行显示白色。我可以在下面看到 css:

:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
  background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  background-repeat: repeat-x;
}

我想反转颜色，即。偶数行为白色，奇数行为背景图像。我怎样才能实现它？我尝试了以下 css，但它不起作用：

:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="details-cell"] {
  background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
  background-repeat: repeat-x;
}

提前致谢。

Answer 1

我认为您还需要覆盖偶数行上的现有背景图像。

所以你可以这样做

:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([odd]) [part~="details-cell"] {
    background-image: none !important;
    background-repeat: repeat-x;
}

:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="body-cell"],
:host([theme~="row-stripes"]) [part~="row"]:not([even]) [part~="details-cell"] {
    background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    background-repeat: repeat-x;
}

请注意，这些样式应放置在以网格的阴影 dom 为目标的样式 sheet 中。如果你使用的是custom-themeing mechanism，那么上面的样式应该放在frontend/themes/<custom-theme-name>/components/vaadin-grid.css.

下

Vaadin 14 网格行条纹：我们如何反转颜色？

Vaadin 14 grid row stripes: How can we reverse the color?

grid

vaadin

vaadin-flow