Styling loginOverlay via component class name?

Styling the loginOverlay via this code works:
@CssImport(value = “./styles/login-view-styles.css”, themeFor = “vaadin-login-overlay-wrapper”)

But where I’m struggling, is to use some selectors/different styles depending the java side addClassName() method

LoginOverlay component = new LoginOverlay();
if (testSystem) {
component.addClassName(“staging”);
}

Any hints how I can have different styling, based on develop/staging/productive system, with the same css file?

https://vaadin.com/docs/latest/styling/custom-theme/styling-components/#sub-components

Since v23.3 (maybe earlier) the class name from the vaadin-login-overlay element is propagated to the vaadin-login-overlay-wrapper. From your CSS you should be able to target classes using:

:host(.staging) { ... }

Thanks, now it works

In the login-view-styles.css which is referenced on the logon screen:

:host(.testinstance) [part=“brand”] {
background-color: darksalmon;
background-image: url(“./styles/test-small.png”);
background-repeat: repeat-x;
}