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

【问题标题】：Is it possible to programatically set the styles in a Vaadin 14 / Flow grid是否可以在 Vaadin 14 / Flow 网格中以编程方式设置样式
【发布时间】：2021-10-20 14:17:02
【问题描述】：

例如，我有一个网格，让用户可以使用 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 值。本质上，我该如何做第一部分，将我的 css 注入 Java 代码？

只是补充一下，我无法执行任何操作，如下所示：https://vaadin.com/docs/v14/flow/element-api/tutorial-dynamic-styling 当我尝试执行 grid.getElement().getStyle().set(...) 时，这将适用于整个表而不是行。

【问题讨论】：

您的网格中的行数是否有限？如果是，我认为可以使用 rowCount 预定义的 CSS 类和 CSS 变量来完成。
无行数限制。
@Hawk 但是假设我已经定义了 css 类，我将如何访问它们来更改它们？例如，假设我有 cssStyle1、cssStyle2 等。我如何以编程方式更改它们在网格单元中的值？在一个组件中你得到 getElement().getStyle().set(...) 但我不知道如何对网格中的行执行此操作...

标签： vaadin vaadin-flow vaadin-grid vaadin14

【解决方案1】：

一种选择是使用 TemplateRenderer 注入样式，这里是一个示例。

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

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

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");

【讨论】：