4

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

试过这个,但不起作用:

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

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

顺便说一句,我知道动态样式教程

4

2 回答 2

0

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

textField.getElement().getStyle().set("color", "red");
textField.getElement().getStyle().set("-webkit-text-fill-color", "red");
于 2020-06-13T16:58:28.210 回答
0

使用自定义主题功能,您可以添加自定义主题@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);
于 2021-12-18T19:41:28.043 回答