时间戳

首页 > 解决方案 > 如何使用 css 设置 vaadin 组件的样式？

java - 如何使用 css 设置 vaadin 组件的样式？

问题描述

我得到一个看起来像这样的 vaadin 项目：

package com.example.myapplication;

import com.vaadin.annotations.StyleSheet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.LabelState;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Label;


@StyleSheet ("stylesheet.css")

@Theme("mytheme")
public class MyUI extends UI {

    private static final long serialVersionUID = 1L;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
            Label lb = new Label("VAADIN PROJECT");
            lb.setStyleName("mystyle");
            layout.addComponent(lb);
            setContent(layout);
 
       
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

还有一个与主文件位于同一目录中的 .css 文件：

.mystyle {
    color: red;
    font-size: 180px;
    pading-left: 30px;
}

当我尝试运行该项目时，它只打印文本而没有更多更改。我该如何解决？ 我的结果

标签： javacssvaadin

解决方案

你可以看看Vaadin 的基本启动器。它为整体视图导入一个 CSS 文件，为特定视图导入一个 CSS 文件。

你可以看到HelloWorldView有注释@CssImport("./styles/views/helloworld/hello-world-view.css")。这将导致仅为该视图导入 CSS 文件。

该类MainView形成其他视图的父/边框。它还为MainView带有注释的特定属性导入 CSS 文件@CssImport("./styles/views/main/main-view.css")。

可以在frontend应用程序的文件夹中找到相应的文件。

推荐阅读