我们如何在 Vaadin Flow (Vaadin 14) 中为所有 VerticalLayout 和 Horizo​​ntalLayout 添加边框？

如何解决我们如何在 Vaadin Flow (Vaadin 14) 中为所有 VerticalLayout 和 Horizo​​ntalLayout 添加边框？

我基本上是在尝试为所有布局添加红色边框，以尝试找出未按预期设置的布局。我看到这是可能的，如该视频的开头所示：https://www.youtube.com/watch?v=Efv_cPHEqdQ 但是当我尝试时它不起作用。我也一直在参考这个视频，它似乎有点不同：https://www.youtube.com/watch?v=Swki9XXs9SA 我也一直在查看这个文档，但不清楚它在我处理布局时似乎不起作用作为组件：https://vaadin.com/docs/latest/ds/customization/styling-components

我基本上想避免在代码中为每个布局添加一个类，而是让它在全局范围内运行。这样我就可以轻松地打开和关闭它以调试布局问题。

是否可以在答案中包含一个示例。我试图创建一个组件 css 文件以及一个布局/视图 css 文件，但似乎都不起作用。 css 就像 border: 1px solid red; 一样简单，唯一的问题是它在哪里。此外，我确实在 frontend/themes/customTheme 下创建了自己的 customTheme 文件夹。

更新 根据评论中的要求，我正在添加我尝试的内容。至少我能记住什么。我忘记了我尝试过的所有内容，所以这只是我尝试过的示例。

添加了 frontend/themes/myCustomTheme/components/vaadin-horizontal-layout.css，其中包含（基于文档和我为文本字段所做的）：

[part="horizontal-layout"] { 
    border: 1px solid red; 
} 

添加了带有内容的 frontend/themes/myCustomTheme/layouts/views/layouts-view.css（基于 YouTube 视频 https://www.youtube.com/watch?v=Efv_cPHEqdQ）：

vaadin-vertical-layout,vaadin-horizontal-layout {
    border: 1px solid red;
}

然后我尝试了上面的一些排列以及其他一些我已经记不起的东西。不同的文件位置、命名约定等。链接和视频似乎也表明了不同的做事方式。我无法在网上找到有关如何为布局执行此操作的说明或示例，因为它们看起来和/或可能与组件不同地对待。例如，我能够使用

使其适用于其他组件

frontend/themes/myCustomTheme/vaadin-text-field.css 与内容：

[part="input-field"] {
    background-color: white;
    border: 1px solid #c5c5c5;
}

解决方法

这个解决方案需要一个“应用程序主题”，OP 似乎已经 到位。 （这意味着当前 LTS 线路上的 14.6 或 各自的非 LTS 版本）。

设置主题：

• @Theme(themeFolder = "app-theme")
• frontend 中的文件夹（在您的开发根目录中）或 META-INF/resources 中 您的类路径：themes/app-theme
• 为您的 HorizontalLayout 添加一个相对于上述路径的主题： components/vaadin-horizontal-layout.css 具有以下内容：

  :host {
    border: 1px solid red;
  }