子组件的 Vaadin 融合样式

Question

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

Answer 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 中使用父主题无法以这种方式工作）。

子组件的 Vaadin 融合样式

Vaadin Fusion Styling of Sub-Components

vaadin-fusion

vaadin20

hilla