为所有含errorMessage的Vaadin组件统一设置错误消息样式的简便方法

Great question! Instead of adding @CssImport for every single Vaadin component that uses error messages, you can use a much cleaner approach that targets the shared error message component directly and leverages CSS variables for flexibility. Here's how to do it:

Step 1: Create a Global Stylesheet #

First, create a global CSS file (e.g., global-error-styles.css) in your Vaadin project's frontend styles directory (typically src/main/resources/META-INF/resources/frontend/styles/).

Add this code to the file:

/* Target the shared Vaadin error message component used by most form components */
vaadin-error-message {
  /* Define a custom CSS variable for easy value adjustment */
  --vaadin-error-message-max-height: 10rem;
  
  /* Use the variable for max-height */
  max-height: var(--vaadin-error-message-max-height);
  /* Fix horizontal overflow with word-break */
  word-break: break-word;
}

Step 2: Import the Global Stylesheet Once #

Instead of annotating every component, add a single @CssImport to your main layout class (or any top-level component that's used across your app):

@CssImport(value = "./styles/global-error-styles.css")
public class MainLayout extends VerticalLayout {
  // Your layout code here
}

This will apply the styles to all instances of vaadin-error-message across your app—this includes error messages from components like vaadin-text-field, vaadin-combo-box, vaadin-date-picker, and most other Vaadin form components, since they all use this shared internal component for error display.

Step 3: Adjust Values Globally or Per-Component #

• Global adjustment: To change the max-height for all error messages everywhere, just update the --vaadin-error-message-max-height value in your global stylesheet.
• Per-component/container adjustment: If you need a different value for a specific section or component, override the variable in that context:

/* Example: Make error messages taller in a specific form */
.checkout-form vaadin-error-message {
  --vaadin-error-message-max-height: 15rem;
}

Why This Is Better Than Per-Component @CssImport #

• Less repetition: No need to duplicate @CssImport annotations for every component type.
• Future-proof: New Vaadin components you add later will automatically inherit the styles, since they'll use vaadin-error-message too.
• Flexible: CSS variables let you adjust values without rewriting the entire style rule.

This should fix both the vertical overflow (by increasing max-height) and horizontal overflow (with word-break: break-word) for all your error messages in one go.

内容的提问来源于stack exchange，提问作者Sharif