我们如何在 Vaadin Flow (Vaadin 14) 中为所有 VerticalLayout 和 HorizontalLayout 添加边框？答案

【问题标题】：How do we add a border to all VerticalLayout and HorizontalLayout in Vaadin Flow (Vaadin 14)?我们如何在 Vaadin Flow (Vaadin 14) 中为所有 VerticalLayout 和 HorizontalLayout 添加边框？
【发布时间】：2021-07-30 17:17:08
【问题描述】：

我基本上是在尝试为所有布局添加红色边框，以尝试找出未按预期设置的布局。我看到这是可能的，如本视频的开头所示：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 文件夹。

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

添加了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;
}

【问题讨论】：

请添加您尝试过的代码以及失败的原因（例如错误、堆栈跟踪、日志等），以便我们对其进行改进。
坦率地说，我不记得我尝试过的所有内容。大约 2-3 小时后，我放弃了，决定在这里问，因为我什么也没得到，而且开始觉得我在尝试随机的事情，而不是使用任何文档或逻辑。我也找不到任何包含示例或说明如何执行此操作的文档。 Vaadin 有很好的文档，我遇到的主要问题是在哪里找到它并不总是很明显。话虽如此，我正在添加一些我能记住的尝试。
@cfrick 我按要求添加了更多详细信息。至少我能记住的……

标签： vaadin vaadin-flow vaadin14 vaadin-themes

【解决方案1】：

此解决方案需要一个“应用程序主题”，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;
}
```

【讨论】：