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

【问题标题】：Vaadin Flow - Create Own Component with StyleSheet "themeFor"Vaadin Flow - 使用样式表“themeFor”创建自己的组件
【发布时间】：2020-12-12 19:20:47
【问题描述】：

您好，我是 vaadin 的新手。我喜欢创建一个自己的组件，我喜欢为其导入自己的“本地”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;
}

【问题讨论】：

也许 YouTube 上的这个新视频可以提供帮助：Styling Web Components with Shadow DOM: CSS variables, parts, shared styles

标签： java css themes stylesheet vaadin-flow

【解决方案1】：

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

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

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

hello {
    color: red;
}

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

【讨论】：