更轻松的方式来样式错误消息部分的所有vaadin组件的一部分

Question

我想更改所有具有错误部分部分的vaadin组件的默认样式。我知道的唯一方法是使用@cssimport（value =“ ...”，themefor =“ ...”）我想要样式的每个vaadin组件的注释。还有其他更轻松，更好的方法吗？

我要这样做的原因： 我想将 max-height css属性从 5REM增加到10REM （我希望我可以用一个全局CSS变量编辑任何值），然后添加 Word - break：break-word 属性，因为某些错误消息会溢出水平和垂直。

图像示例我的问题

图像，示例我的解决方案

Answer 1

一种类似的方法是使用主题创建vaadin-text-field.css，vaadin-combo-box.css等主题/主题/your-theme-name/components/folder的主题。这些文件会自动添加到组件中，从而使其更容易维护（主观）。请查看有关创建自定义主题的更多详细信息。

Answer 2

如果您不需要支持IE11和Pre-Cromium Edge等较旧的浏览器，则可以轻松地使用:: part（） selector中的所有vaadin组件在全球stylesheet中的选择器：

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