0

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

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

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

1 回答 1

2

这个解决方案需要一个“应用程序主题”，OP 似乎已经有了。（这意味着当前 LTS 行或相应的非 LTS 版本上的 14.6）。

有一个主题设置：

  • @Theme(themeFolder = "app-theme")
  • frontend（在您的开发根目录中）或您的类路径中的文件夹META-INF/resources：themes/app-theme
  • HorizontalLayout为您的相对于上述路径 添加一个主题：components/vaadin-horizontal-layout.css具有以下内容： 
    :host {
  border: 1px solid red;
}
于 2021-07-31T07:43:44.097 回答