是否可以在Vaadin 14 /流网格中以编程方式设置样式

Question

例如，我有一个网格，让用户使用Vaadin 8定义特定数据的颜色，我也希望在Vaadin 14/Flow中提供此选项。

在Vaadin 8中，我做到了(针对每种样式/数据类型):

Page.getCurrent().getStyles()
    .add(".MyCustomTheme .v-grid-cell." + cssName + " { background-color:" + userSelectedColor + "; }");

然后在网格代码中我会做:

addColumn(myColumn).setStyleGenerator(cssName);

在Vaadin 14 / Flow中，我有:

addColumn(myColumn).setClassNameGenerator(cssName);

然而，我似乎不知道如何以编程方式更改cssName的css值。本质上，我如何在Java代码中注入css的第一部分呢？

只是补充一下，我不能做任何事情，如以下所示：https://vaadin.com/docs/v14/flow/element-api/tutorial-dynamic-styling当我尝试执行grid.getElement（）.getStyle（）.set（…）时，这将应用于整个表而不是行。

Answer 1

一种选择是使用TemplateRenderer注入样式，下面是一个例子。

grid.addColumn(TemplateRenderer.<Bean> of(
        "<div style$=\"[[item.styles]]\">[[item.data]]</div>")
        .withProperty("styles", "color: red")
        .withProperty("data", Bean::getData));

另请注意，网格的表及其单元格位于影子 DOM 中。因此，如果您使用的是setClassNameGenerator，则需要在Grid的样式模块中设置样式，而不是全局css。即设置生成器

grid.addColumn(..).setClassNameGenerator(item -> item.getData() < 0 ? "red" : null);

为css添加导入

@CssImport(value = "my-grid-styles.css", themeFor = "vaadin-grid")

在"前端/my-grid-styles.css"中使用

.red {
   color: red;
}

注意，正如在其他答案中所解释的，您也可以将颜色设置为来自css属性。

.red {
   color: var(--my-grid-cell-color);
}

然后，您可以使用（不需要JavaScript调用）在网格范围内定义该颜色的值

grid.getElement().getStyle().set("--my-grid-cell-color","red");