嗨,我是瓦丁的新手。我喜欢有一个自己的组件,它喜欢导入自己的“本地”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;
}
1条答案
按热度按时间ykejflvf1#
不能将本地样式范围应用于自定义组件,
HelloComponent
,因为它甚至没有阴影dom。局部样式作用域与常规vaadin组件(例如TextField
或者Button
)因为这些组件有一个阴影dom。就你而言,HelloComponent
必须使用常规css选择器来使用全局样式范围。您可以在java代码中使用组件的getStyle()
方法:或者,也可以使用
@CssImport
注解,然后在此样式表中,以HelloComponent
使用常规css选择器。例如,可以添加@CssImport("./shared-styles.css")
去你的一个班,然后shared-styles.css
放置以下样式:如果您想用自己的shadowdom创建一个自定义元素,那么需要使用polymer或lit元素为其创建一个客户端组件。但即便如此
@CssImport
与themeFor = "MyCustomElement"
不会自动工作。要使其工作,您的客户端自定义元素还必须实现ThemableMixin
(https://github.com/vaadin/vaadin-themable-mixin). 后者是允许任何组件(包括vaadin自己的常规组件)使用@CssImport
.