java - 在 Vaadin 中使用 css 进行样式设置

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;
    }
}

告诉 UI 使用它：

@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 引用现有主题，否则您的主题看起来会非常“精简”。