作者：书友76086805 | 来源：互联网 | 2023-07-25 16:28
例如，我有一个网格，我让用户使用 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(...)这将适用于整个表而不是比行。
回答
一种选择是使用 TemplateRenderer 来注入样式，这里是一个例子。
grid.addColumn(TemplateRenderer. of(
"[[item.data]]
")
.withProperty("styles", "color: red")
.withProperty("data", Bean::getData));
另请注意，Grid 的表格及其单元格位于 shadow DOM 中。因此，如果您使用 setClassNameGenerator，则需要在样式模块中为 Grid 设置样式，而不是全局 css。即设置发电机
grid.addColumn(..).setClassNameGenerator(item -> item.getData() <0 ? "red" : null);
为 css 添加导入
@CssImport(value = "my-grid-styles.css", themeFor = "vaadin-grid")
并在“frontend/my-grid-styles.css”中使用
.red {
color: red;
}
请注意，就像在其他答案中解释的那样，您还可以将颜色设置为来自 css 属性。
.red {
color: var(--my-grid-cell-color);
}
然后，您可以使用（不需要 Javascript 调用）在 Grid 范围中定义该颜色的值
grid.getElement().getStyle().set("--my-grid-cell-color","red");
京公网安备 11010802041100号