为所有 vaadin 组件设置错误消息部分样式的更简单方法

Question

我想更改所有具有 errorMessage 部分的 vaadin 组件的默认样式。我知道的唯一方法是对我想要设置样式的每个 vaadin 组件使用 @CssImport(value="...", themeFor="...") 注释。还有其他更简单、更好的方法吗？

我想这样做的原因：我想将 max-height css 属性从 5rem 增加到 10rem （我希望我可以用一个全局 css 变量到任何值）并添加 word-break: break-word 属性，因为一些错误消息会同时溢出水平和垂直方向。

image with example of my problem

image with example of my solution

Answer 1

一种类似的方法是在您创建 vaadin-text-field.css、vaadin-combo-box.css 等的地方使用主题 theme/your-theme-name/components/ 文件夹。这些文件会自动添加到组件中，使其更易于维护（主观）。在 Vaadin 文档中查看有关 Creating Custom Theme.

的更多详细信息

Answer 2

如果您不需要支持旧版浏览器，如 IE11 和 pre-Chromium Edge，您可以使用全局样式表中的 ::part() 选择器轻松地为所有 Vaadin 组件做到这一点：

::part(error-message) {
  max-height: 10em;
  word-break: break-word;
}

为所有 vaadin 组件设置错误消息部分样式的更简单方法

Easier way to style error message part of all vaadin components

vaadin-flow

vaadin14