时间戳

首页 > 解决方案 > Vaadin Flow - 使用样式表“themeFor”创建自己的组件

java - Vaadin Flow - 使用样式表“themeFor”创建自己的组件

问题描述

嗨，我是 vaadin 的新手。我喜欢创建一个自己的组件，我喜欢为其导入自己的“本地”css 样式表。我尝试遵循指南（此处和此处），但它不起作用。我做错了什么？我正在使用 Vaadin v17.0.9。先感谢您。

问题和疑问

Java 类

@Route("/")
@Theme(value = Lumo.class)
@CssImport(value = "./styles/hello-component.css", themeFor = "hello")
public class MainView extends VerticalLayout {
    
    private static final long serialVersionUID = 1L;
    
    @PostConstruct
    private void init() {
        setSizeFull();
        add(new HelloComponent());
    }
}

@Tag("hello")
public class HelloComponent extends Div {

    private static final long serialVersionUID = 1L;
    
    public HelloComponent() {
        init();
    }
    
    private void init() {
        setSizeFull();
        setText("Test");
    }
}

样式表“前端/样式/hello-component.css”

:host  {
    color: red;
}

标签： javacssthemesstylesheetvaadin-flow

解决方案

您不能将本地样式范围应用于您的自定义组件HelloComponent，因为它甚至没有 Shadow DOM。本地样式范围与常规 Vaadin 组件（例如 aTextField或 a Button）相关，因为这些组件具有 Shadow DOM。在您的情况下，HelloComponent必须使用常规 CSS 选择器使用全局样式范围。您可以使用组件的getStyle()方法在 Java 代码中执行此操作：

HelloComponent helloComponent = new HelloComponent();
helloComponent.getStyle().set("color", "red");

或者，您可以使用@CssImport注释导入全局样式表，然后在此样式表中，HelloComponent使用常规 CSS 选择器定位您的目标。例如，您可以添加@CssImport("./shared-styles.css")到其中一个类中，然后shared-styles.css使用以下样式：

hello {
    color: red;
}

如果你想用自己的 shadow DOM 创建一个自定义元素，你需要使用 Polymer 或 Lit-element 为它创建一个客户端组件。但即便如此，@CssImportwiththemeFor = "MyCustomElement"也不会自动工作。为此，您的客户端自定义元素还必须实现ThemableMixin（https://github.com/vaadin/vaadin-themable-mixin）。后者是允许任何组件（包括 Vaadin 自己的常规组件）使用@CssImport.

推荐阅读