Easier way to style error message part of all vaadin components

Question

I want to change the default style for all vaadin components which has errorMessage part. The only way i know is to use @CssImport(value="...", themeFor="...") annotation for each vaadin component I want to style. Is there any other easier, nicer ways to do it?

The reason why i want to do this: I want to increase the max-height css property from 5rem to 10rem (I wish i could edit this with a global css variable to any value) and add word-break: break-word property too, because some error message overflows both horizontaly and verticaly.

image with example of my problem

image with example of my solution

Answer 1

A similar approach would be to use the theming where you create a vaadin-text-field.css, vaadin-combo-box.css and so on inside your theme/your-theme-name/components/ folder. Those files are automatically added to the components making it s little bit easier to maintain (subjective). See more details in Vaadin documentation about Creating Custom Theme.

Answer 2

If you don't need to support older browsers like IE11 and pre-Chromium Edge, you can do that easily for all Vaadin components with the ::part() selector in a global stylesheet:

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