无法让@CssImport 仅应用于组件范围

Question

我已经浪费了数小时和数天的时间来尝试设置 Vaadin 上传组件的样式。目标很简单：

有时我需要组件使用其允许删除的内置文件列表来显示上传的文件。
其他时候，我想隐藏此列表，因为我有另一个组件（例如 Grid）来显示文件详细信息。

现在问题来了，我永远无法将 @CssImport 与 themeFor=vaadin-upload 和 themeFor=vaadin-upload-file 一起使用。 Vaadin 似乎编译了影子 dom，最终结果各不相同，它混合了两个选项，最后一个被应用。

然后我想可能是因为@CssImport 在@Route 组件中。因此，我创建了两个自定义上传组件，它们扩展了 vaadin-upload 组件，不同之处在于不同的 @CssImport（见下文）。那（令人沮丧地）仍然不起作用。我检查了文档，发现 shadow-dom 里面包含了两者，尽管我从来没有在同一页上使用它们。

@CssImport(value = "./css/vaadin-upload-show.css", themeFor = "vaadin-upload")
public class UploadShowFiles extends Upload {

    private static final long serialVersionUID = -9198630843136885092L;

    public UploadShowFiles(Receiver receiver) {
        super(receiver);
    }

}

@CssImport(value = "./css/vaadin-upload-hidefile.css", themeFor = "vaadin-upload")
public class UploadHideFiles extends Upload {

    private static final long serialVersionUID = 2344860066834705807L;

    public UploadHideFiles(Receiver receiver) {
        super(receiver);
        setClassName("hide-upload");
    }

}

下面的css会出现在阴影dom中。我希望只显示：none 或其他，而不是两者。

[name="file-list"] {
    display: none !important;
    height: 0px !important;
}

[name="file-list"] div[part="file-list"] {
    display: none !important;
}

[name="file-list"] {
    display: block !important;
    height: 1.5rem !important;
}

[name="file-list"] div[part="file-list"] {
    display: block !important;
}

p/s：这是我第一次在项目中使用Vaadin，我可能再也不会使用它了。在 Vaadin 中定制任何东西都非常耗时和痛苦。

Answer 1

阴影中的造型 DOM 确实很棘手。 Vaadin 19 中的 simplified theming 有点帮助。

@CssImport 注释的放置位置会影响 CSS 是否应包含在文档中，但不会影响它影响的组件。使用 themeFor，它将始终应用于所有匹配的组件。

你可以做的是使用 :host 选择器来限制它适用于哪些上传组件。这里我使用的是基于 class 的方法：

:host(.no-file-list) [name="file-list"] {
    display: none !important;
    height: 0px !important;
}

:host(.no-file-list) [name="file-list"] div[part="file-list"] {
    display: none !important;
}

然后我可以通过添加 class:

在上传组件中隐藏文件列表

@Route
@CssImport(value = "./styles/upload-style.css", themeFor = "vaadin-upload")
public class FileUploadTest extends VerticalLayout {

    public FileUploadTest() {
        Upload uploadWithFileList = new Upload();
        Upload uploadWithoutFileList = new Upload();
        uploadWithoutFileList.addClassName("no-file-list");

        add(uploadWithFileList, uploadWithoutFileList);
    }
}

无法让@CssImport 仅应用于组件范围

Cannot get @CssImport to apply only to component scope

vaadin

vaadin-flow