Vaadin 更改文本字段标签颜色答案

【问题标题】：Vaadin change Textfield Label colorVaadin 更改文本字段标签颜色
【发布时间】：2021-07-20 17:16:08
【问题描述】：

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

color: <anycolor>;

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

【问题讨论】：

【解决方案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; 在你的global CSS中设置那个变量的值。多种选择：
1. 在那个特定的文本字段textField.getStyle().set("--lumo-primary-text-color", "green")，或
2. 将其应用于具有类 textField.addClassName("green-text") 的字段
```
green-text {
    --lumo-primary-text-color: green;
}
```
  , 或
3. 将其应用于所有文本字段：
```
vaadin-text-field {
    --lumo-primary-text-color: green;
}
```

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

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

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

【讨论】：