Vaadin 更改文本字段标签颜色

Question

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

color: <anycolor>;

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

Answer 1

如果您<label>在浏览器 DevTools（F12 或 Ctrl+Shift+C）中检查应用于标签的 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;
   }