Docs

Docs

Styling Component Instances

Configuring and applying styles to specific instances of a component.

Sometimes you need to apply different styles to specific instances of a component, instead of all components of a particular type. This can be done by applying a CSS class name to the components and using that in your CSS selector, or by scoping the styles to components contained in a particular parent element.

Applying CSS to Component Instances

CSS can be scoped to specific component instances by applying CSS class names to the components with the addClassName method and adding them to the HTML element selector prefixed with a period, as shown in the example here:

TextField tf = new TextField();
tf.addClassName("bordered");
vaadin-text-field.bordered::part(input-field) {
  background: white;
  border: 1px solid gray;
}
Note
CSS Class Names

CSS class names are identifier-attributes applied to HTML elements to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes.

Components with overlay elements – like Combo Box, Date Picker, and Menu Bar – have a separate API for applying class names to their overlays:

Select localeSelector = new Select("Locale", locChangeListener, locales);
localeSelector.addOverlayClassName("locales");
vaadin-select-overlay.locales::part(overlay) {
  background: black;
  color: white;
}

Some components like Grid provide APIs for applying custom shadow part names to their internal elements, instead of class names.

The same approach can be used to scope styles to a particular view or other UI element.

Note
Custom Theme Names Supported, Not Recommended

In previous versions of Vaadin, a different feature called theme names was used to apply identifiers that were also propagated to overlays. This feature is still supported and is used for the built-in style variants in Vaadin components. However, it’s no longer the recommended approach for styling components or their overlays.

Applying CSS Based on Parent Element

CSS can also be scoped to components based on their parent elements – such as Horizontal Layout and Vertical Layout or HTML elements like divs – in which they are placed. This is done by applying a CSS class name to the parent element, and prefixing the selector with it:

VerticalLayout filterLayout = new VerticalLayout();
filters.addClassName("filter-layout");
TextField nameFilterField = new TextField();
filterLayout.add(nameFilterField);
.filterLayout vaadin-text-field::part(input-field) {
  background: white;
  border: 1px solid gray;
}

The parent element can be either the component’s nearest parent element or any outer parent element in the element hierarchy. This can be used to apply CSS to components in a specific view in the application, by applying a CSS class name to the view’s root layout element, and scoping component CSS blocks to it.

a83c6e13-e0fc-4e34-bcad-15dff01f8840