Customizing the styling of web components apart from using themes.

Hello Vaadin Folks,
I wonder what is the recommended approach for customizing the styling of web components in a vaadin flow application that uses the default Lumo theme? Should I create a custom theme in all instances ,

Or is it acceptable to import a CSS file for a specific component?

For example, I needed to decrease some padding around one of the multi-select components, and I used the following code: @CssImport(value = ‘./styles/components/vaadin-multi-select-combo-box.css’, themeFor = ‘vaadin-multi-select-combo-box’).
:host, :host([has-label]) { padding-top: var(--lumo-space-s); padding-bottom: 0; ... }

which seems to work but cannot find it mentioned in the vaadin docs. I understand in V24 styling has changed, I wonder if this method would still be allowed.

thank you for any guidance.

It’s mentioned here:
TL;DR : it’s still supported (for now), but not the primary recommended approach

so, to be clear, are you using V23 or V24?

The recommended way (if you are not using a theme) is to do this instead:
@CssImport(value = './styles/components/vaadin-multi-select-combo-box.css').
Then :
vaadin-multi-select-combo-box, vaadin-multi-select-combo-box[has-label] { padding-top: var(--lumo-space-s); padding-bottom: 0; ... }
Try to not use themeFor and :host, it’s specific to Vaadin and now the recommended way is the standard way (which didn’t exist before)

thanks @useful-whale I am using 23 but plan on upgrading to 24 soon.

(and the CssImport is still working in v24)

thank you @faithful-emu so this should work for now but recommendation is to use standard CSS.

awesome thanks again.