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) {

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

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;