セルの値に基づいて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が正しく更新されていることがわかります(下の画像を参照)。
行のTD要素のbackground-color
を上書きする必要があります:
.v-grid-row.error_row > td {
background-color: red;
}
ブラウザのスタイル検査を使用すると、Vaadinがどのようにスタイルを実装したかを確認できます。