Question

我正在尝试编辑Vaadin中文本字段的文本。我创建了一个文件（\ WebContent \ VAADIN \ themes \ loginthemes \ style.css），只包含以下信息：

textstyle      {  
   font-family: HelveticaRounded; 
   font-size: 40px;
   font-style: bold;
}

在我的java文件中，我有以下内容：

TextField username = new TextField("Username: ");
username.setStyleName("style");
// I also tried username.setStyleName("loginthemes");

文本字段的文本保持不变。

Answer 1

正如Jan Galinski所说，你应该定义一个合适的主题。对于名为“logintheme”的名称，您应该创建 VAADIN / theme / logintheme / style.scss ：

@import "../reindeer/reindeer.scss";
.logintheme {
    @include reindeer;

    .textstyle {  
        font-family: HelveticaRounded; 
        font-size: 40px;
        font-style: bold;
    }
}

告诉用户界面使用它：

@Theme("logintheme")
    public class MyUI extends UI {
}

此外，您对 setStyleName（）的使用不正确：参数是CSS类的名称，而不是主题的名称。所以在你的情况下，它应该是：

TextField username = new TextField("Username: ");
username.setStyleName("textstyle");

Answer 2

您必须在UI类上指定主题。

@Theme("logintheme")
public class MyUI extends UI {
}

另外，您应该通过@import引用现有主题，否则您的主题看起来会非常“缩小”。

使用CSS在Vaadin中设置样式

2 个答案: