我已经浪费了数小时和数天的时间来尝试设置 Vaadin 上传组件的样式。目标很简单:
- 有时我需要组件使用其允许删除的内置文件列表来显示上传的文件。
- 其他时候,我想隐藏此列表,因为我有另一个组件(例如 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 dom中。我希望只显示:无或其他,而不是两者。
[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 中自定义任何内容都非常耗时且痛苦。
最佳答案
在影子 DOM 中设置样式确实很棘手。 simplified theming在 Vaadin 19 中有点帮助。
放置 @CssImport
注释的位置会影响 CSS 是否应包含在文档中,但不会影响它影响的组件。使用 themeFor
,它将始终应用于所有匹配的组件。
您可以做的是使用 :host
选择器来限制它适用于哪些上传组件。我在这里使用基于类的方法:
: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;
}
然后我可以通过添加一个类来隐藏上传组件中的文件列表:
@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);
}
}
关于vaadin - 无法让@CssImport 仅应用于组件范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67419084/