Vaadin 更改文本字段标签颜色

如何解决Vaadin 更改文本字段标签颜色

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

color: <anycolor>;

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

解决方法

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

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

有 2 个选项可以自定义：

1. 更改变量。 您可以编写 --lumo-primary-text-color: green; 以在您的全局 CSS 中设置该变量的值。多个选项：

   1. 在那个特定的 textField 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;
      }
      

2. 使用更具体的规则重载 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;
   }