Vaadin 更改文本字段標簽顏色

Question

我正在尋找一種簡單的方法來更改 Vaadin TextField 組件的標簽顏色。 當 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 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; }