web-dev-qa-db-ja.com

Vaadin 8でグリッド行に条件付きで色を付ける方法は?

セルの値に基づいて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が正しく更新されていることがわかります(下の画像を参照)。

enter image description here

12
Hiran Perera

行のTD要素のbackground-colorを上書きする必要があります:

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

ブラウザのスタイル検査を使用すると、Vaadinがどのようにスタイルを実装したかを確認できます。

14
Steffen Harbich