Vaadin Flow TextField：如何动态更改字体颜色？答案

【问题标题】：Vaadin Flow TextField: how dynamically change font color?Vaadin Flow TextField：如何动态更改字体颜色？
【发布时间】：2019-01-25 21:24:30
【问题描述】：

我想动态更改 Vaadin Flow TextField 组件的字体颜色。

试过了，还是不行：

textField.getElement().setProperty("color", "red");

我怀疑这是因为 <input> 元素隐藏在 shadow dom 中。我不知道如何处理。

顺便说一句，我知道Dynamic Styling tutorial。

【问题讨论】：

你检查过这个问题和答案吗？stackoverflow.com/questions/53126339/…
我自己还没有测试过，但我认为解决您的问题的方法是使用“输入元素”部分定义可主题混合，并在那里使用自定义属性作为字体颜色，您可以在全局中定义样式，然后您可以动态更改自定义属性的值。
谢谢。是的，我看到了这个问题。我还没有看到如何在 Java (Flow) 代码中创建可主题化的 mixin 和自定义属性的示例代码。 A 还无法获得完整的图片。除此之外，对于一个相当常见和简单的用例来说，这不是一种过于复杂的方法吗？
关于同一主题还有另一个问答，其中有一个关于使用可主题混合的文本字段样式的示例，请参阅：stackoverflow.com/questions/53141129/…
谢谢大图，我现在清楚了

标签： css vaadin-flow

【解决方案1】：

使用 Custom Theme feature，您可以添加自定义主题 @Theme(value = "my-theme")，创建 CSS 样式表文件 ${project.basedir}/frontend/themes/my-theme/components/vaadin-text-field.css 并将以下内容放在那里：

:host(.my-class-red) [part="input-field"]{
    color:red
}

:host(.my-class-blue) [part="input-field"]{
    color:blue
}

在 Java 方面：

TextField name = new TextField("Your name");
name.setLabel("My label");
        
Button red = new Button("Red", click -> {
   name.removeClassName("my-class-blue");
   name.addClassName("my-class-red");
});

Button blue = new Button("Blue", click -> {
   name.removeClassName("my-class-red");
   name.addClassName("my-class-blue");
});

Button reset = new Button("Reset", click -> {
   name.removeClassNames("my-class-red", "my-class-blue");
});

add(red, blue, reset);

【讨论】：

欢迎来到 SO！伟大的第一次贡献，谢谢。
谢谢，@rmuller！很高兴这对您有所帮助。

【解决方案2】：

如果您不关心输入字段上方标签的文本颜色也会变为红色，您也可以结合使用它（在当前的 Firefox 和 Chromium 中使用 Vaadin 14.2.1 进行测试）：

textField.getElement().getStyle().set("color", "red");
textField.getElement().getStyle().set("-webkit-text-fill-color", "red");

【讨论】：