vaadin flow-使用样式表“themefor”创建自己的组件

xwmevbvl  于 2021-06-30  发布在  Java
关注(0)|答案(1)|浏览(301)

嗨,我是瓦丁的新手。我喜欢有一个自己的组件,它喜欢导入自己的“本地”css样式表。我试着遵循指导方针(这里和这里),但它不工作。我做错了什么?我正在使用vaadin v17.0.9。先谢谢你。
议题和问题
我的组件的@cssimport似乎被忽略了。有没有办法将文本颜色设置为“红色”?
有没有办法为我的组件设置一个默认的.css样式表文件,它可以被覆盖?
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");
    }
}

样式表“frontend/styles/hello component.css”

:host  {
    color: red;
}
ykejflvf

ykejflvf1#

不能将本地样式范围应用于自定义组件, HelloComponent ,因为它甚至没有阴影dom。局部样式作用域与常规vaadin组件(例如 TextField 或者 Button )因为这些组件有一个阴影dom。就你而言, HelloComponent 必须使用常规css选择器来使用全局样式范围。您可以在java代码中使用组件的 getStyle() 方法:

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

或者,也可以使用 @CssImport 注解,然后在此样式表中,以 HelloComponent 使用常规css选择器。例如,可以添加 @CssImport("./shared-styles.css") 去你的一个班,然后 shared-styles.css 放置以下样式:

hello {
    color: red;
}

如果您想用自己的shadowdom创建一个自定义元素,那么需要使用polymer或lit元素为其创建一个客户端组件。但即便如此 @CssImportthemeFor = "MyCustomElement" 不会自动工作。要使其工作,您的客户端自定义元素还必须实现 ThemableMixin (https://github.com/vaadin/vaadin-themable-mixin). 后者是允许任何组件(包括vaadin自己的常规组件)使用 @CssImport .

相关问题