css - Vaadin 流文本字段 : how dynamically change font color?

Question

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

试过这个，但不起作用:

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

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

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

Answer 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);