子组件的 Vaadin Fusion 样式答案

【问题标题】：Vaadin Fusion Styling of Sub-Components子组件的 Vaadin Fusion 样式
【发布时间】：2021-10-29 15:37:06
【问题描述】：

如何将部件样式应用于嵌套的 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的组件的风格。

【问题讨论】：

标签： vaadin20 vaadin-fusion hilla

【解决方案1】：

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

您只能使用 custom theme 将样式应用于 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 中，使用父主题不能以这种方式工作）。

【讨论】：