如何在 Vaadin 8 中有条件地为网格行着色？答案

【问题标题】：How to color a grid row conditionally in Vaadin 8?如何在 Vaadin 8 中有条件地为网格行着色？
【发布时间】：2017-12-04 04:06:23
【问题描述】：

我想根据单元格的值更改 Vaadin 网格行的颜色。我试了如下，还是不行。

SCSS

@import "mytheme.scss";
@import "addons.scss";

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss

.mytheme {
     @include addons;
     @include mytheme;

     .v-grid-row.error_row {
            // Tried following elements and didn't work.
            // background-color: red !important;
            // color: blue !important; // This changed the color of the font.
            background: green !important;
     }
}

Java 代码

grid.setStyleGenerator(t -> {
            if (t.getLogLevel().trim().equals(ERROR) || t.getLogLevel().trim().equals(WARN)) {
                return "error_row";
            } else {
                return null;
            }
        });

注意：我从浏览器的开发人员工具中检查了 css，显示 css 已正确更新（见下图）。

【问题讨论】：

我希望在 java 代码中看到 xxx.addStylename("howitscalled");
我的意思是你只设置线条在网格行中的显示方式。但是它们将代表什么颜色 - 那是另一个问题。
我想知道为什么在 SCSS 中将 .mytheme 嵌套到 .mytheme 中？
@Reborn - 我只是想更改行的背景颜色，我已经在 styles.scss 文件中指定了颜色。
可能背景颜色样式被单元格的 td 样式覆盖了？你检查过单元格的样式吗？

标签： java sass vaadin vaadin-grid vaadin8

【解决方案1】：

您需要覆盖该行的TD元素的background-color：

.v-grid-row.error_row > td {
    background-color: red;
}

通过使用浏览器的样式检查，您可以了解 Vaadin 是如何实现样式的。

【讨论】：

对不起，该解决方案运行良好。非常感谢。
确实，这个解决方案在 Vaadin 8.6.0.beta1 中也适用于我。谢谢。
Variation... 要仅对第二列着色，请使用 nth-child 选择器：.v-grid-row.fresh_row > td:nth-child(2) { background-color: honeydew; }