我想通过改变文件列表中元素的外观，例如隐藏命令按钮（开始，删除，重试）来样式VaadinUpload组件（vaadin-上传）。文件列表包含vaadin-upadad-file元素。
目前，我只能通过添加自定义主题并导入适当的css来自定义vaadin上传本身，就像在这个例子中一样：https://cookbook.vaadin.com/large-upload-area.
@CssImport(value = "./styles/custom-upload.css", themeFor = "vaadin-upload")
public class MainView extends VerticalLayout implements HasUrlParameter<String> {
public MainView() {
Upload upload = new Upload();
upload.getElement().getThemeList().add("custom-upload");
add(upload);
}
}
自定义上传。css:
:host([theme~="custom-upload"]) {
border: 0;
}
:host([theme~="custom-upload"]) [part="commands"] {
display: none;
}
简化DOM：
<vaadin-upload theme="custom-upload" target="VAADIN/dynamic/resource/1/70860bf9-21c4-474e-9418-fd5516c28736/upload">
#shadow-root
<div part="primary-buttons">...</div>
<slot name="file-list">
<div id="fileList" part="file-list">
<vaadin-upload-file>...</vaadin-upload-file>
</div>
</slot>
...
</vaadin-upload>
文件指出：
命令）https://vaadin.com/components/vaadin-upload/html-api/elements/Vaadin.UploadFileElement.主题值应该根据https://vaadin.com/docs/v14/flow/styling/styling-components/#sub-components传播到所有子组件-这似乎不是这样。是否有方法将自定义主题附加到vaadin上载文件组件？
是的，您只需要一个单独的样式模块来定位vaadin-upadad-file组件，这是可以使用@Css导入注释来完成的。例如，
@CssImport(value = "./styles/custom-upload-file.css", themeFor = "vaadin-upload-file")
然后，可以将自定义CSS添加到{project_root}/前端/样式/custom-upload-file.css。
编辑：与其他Vaadin组件不同，分配给vaadin-上传的主题名称不会（不幸的是）向下传播到vaadin上传文件。因此，我们不能依赖主题属性来选择性地样式化同一应用程序中的某些vaadin-addad-file组件。
如果有必要进行选择性的样式设置，则可以通过调用JavaScript将类名添加到vaadin上传文件组件中，从而实现一种黑客解决方案。然而，只有在DOM中呈现vaadin上传文件后（通常在文件上传成功时发生），这种调用才会起作用。因此，JS调用应该在upload success侦听器中进行。
下面是用于选择性隐藏vaadin-upadad-file的清除按钮的工作方法：
@Route
@CssImport(value = "./styles/vaadin-upload-styles.css", themeFor = "vaadin-upload-file")
public class MainView extends VerticalLayout {
public MainView() {
MemoryBuffer buffer = new MemoryBuffer();
Upload upload = new Upload(buffer);
upload.addSucceededListener(e -> {
upload.getElement()
.executeJs("this.shadowRoot.querySelector('vaadin-upload-file').className = 'hidden-clear'");
});
Button showClear = new Button("Show clear button", e -> upload.getElement()
.executeJs("this.shadowRoot.querySelector('vaadin-upload-file').className = ''"));
add(upload, showClear);
}
}
然后在vaadin上传样式中。css，可以执行以下操作：
:host(.hidden-clear) [part~=clear-button] {
display: none;
}
要修改扩展ThemableMixin的Vaadin Web组件中的样式，可以
组件文件夹中创建一个名为vaadin-upload-file.css的自定义主题。在这里阅读更多。无论哪种方式，您都需要了解ThemeList#add（String）只是将参数附加到客户端的theme属性。因此，您只需要在CSS中处理新主题，例如：
:host([theme~="prettypink"]) [part="done-icon"]::before {
color: #ff31f1;
}
下面是vaadin-上传和vaadin-上传-文件的默认Lumo样式。
