Vaadin 更改文本字段标签颜色

Question

我正在寻找一种简单的方法来更改 Vaadin TextField 组件的标签颜色。当文本字段处于焦点时它会自动变为蓝色，但我需要将其更改为另一种颜色。首先，我尝试在 css 文件中更改它，如下所示：

color: <anycolor>;

但这只是改变了输入文本的颜色。有没有办法只改变标签的颜色？我正在使用 Vaadin 14。

Answer 1

如果您在浏览器 DevTools（F12 或 Ctrl+Shift+C）中检查应用于 <label> 标记的 CSS，您会看到它是

:host([focused]:not([readonly])) [part="label"] {
    color: var(--lumo-primary-text-color);
}

有 2 个自定义选项：

更改变量。 您可以编写 --lumo-primary-text-color: green; 以在 全局 CSS 中设置该变量的值。多个选项：
1. 在那个特定的文本字段上 textField.getStyle().set("--lumo-primary-text-color", "green")，或
2. 将其应用于具有 class、textField.addClassName("green-text") 的字段
```
green-text {
    --lumo-primary-text-color: green;
}
```
  , 或
3. 将其应用于所有文本字段：
```
vaadin-text-field {
    --lumo-primary-text-color: green;
}
```

使用更具体的规则重载 CSS。 您需要将此添加到 vaadin-text-field 的 阴影DOM与

@CssImport(value = "./styles/path/yout-vaadin-text-field.css", 
themeFor = "vaadin-text-field")

:host(.green-text[focused]:not([readonly])) [part="label"] {
     color: green;
}

Vaadin change Textfield Label color