小编Jos*_*ing的帖子

我已经浪费了数小时和数天试图设计 Vaadin Upload 组件的样式。目标很简单：

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

现在问题来了，我永远无法使用@CssImport 和 themeFor=vaadin-upload 和 themeFor=vaadin-upload-file 让它始终如一地工作。Vaadin 似乎编译了 shadow 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会出现在shadow …