1

如何将部件样式应用于嵌套的 Vaadin 组件？Vaadin 组件在其发布的 API 中公开用于样式的“部分”。

具体来说，该vaadin-upload组件托管另一个组件，vaadin-upload-file. 我可以设置主 vaadin-upload 组件的样式，但是如何访问嵌套的 vaadin-upload-file 组件的各个部分？

例如，对于vaadin-upload-file我未成功尝试的 CSS 选择器的“名称”部分，例如

[part="name"]  { ... // plain, as if it were passed through
vaadin-upload-file[part="name"]  { ... // qualified with the component name
[part="file-list"][part="name"] { ... // qualified by the part of vaadin-upload that hosts the file list
:host([part="file-list"]) [part="name"] { ... // same with :host() selector

这都是部署组件的风格vaadin-upload。

4

1 回答 1

1

由于答案以不同的方式传给我，这是 SO 的解决方案：

您只能使用自定义主题将样式应用于 Vaadin 组件及其子组件。

这是使用父主题进行设置的稍微扩展的方法。

  • 在您的应用中创建本地自定义主题
    • 路径是frontend/themes/<my-theme-name>/
    • 必须包含一个子目录components（用于设置 Vaadin 组件的样式）
    • 必须包含一个styles.css（甚至是空的）
    • 必须包含theme.json带有内容 的
      {
   "parent": "<my-parent-theme>"
}
      但是对于 theme.json 还有其他键，例如importCss,documentCss或assets
    • 父主题可以是 pom 依赖
  • 在Application.java中使用自定义主题： 
    @Theme(value = "<my-theme-name>")
public class Application extends SpringBootServletInitializer ...
  • 然后您可以在本地添加样式文件来设置 Vaadin 组件的样式，例如
    • 添加frontend/themes/<my-theme-name>/components/vaadin-upload.css： 
      [part=file-list]::before {
  content: "These are the current files:";
}
    • frontend/themes/<my-theme-name>/components/vaadin-upload-file.css： 
      [part=name] {
  background-color: yellow;
}

这适用于 Vaadin21（例如，在 Vaadin19 中使用父主题不能以这种方式工作）。

于 2021-11-11T14:02:16.790 回答