css - vaadin 为菜单内的 div 应用 css-classname

Question

我在一个简单的水平布局中使用两个 div 来管理响应式布局。

public class UserMenu extends MenuBar {
    @Inject
    private ResourceManagerBean bundle;
    @Inject
    private SessionPrincipalPrimitiveIntf sessionPrincipal;
    @Inject
    private SSOHandlerIntf ssoHandlerIntf;

    @PostConstruct
    private void init() {
        SubMenu root = this.addItem(createProfileInformation(sessionPrincipal.getLoggedInUser())).getSubMenu();
        createMenuContent(root);

        this.setId("usermenu");
        this.addClassNames("ms-auto", "me-m", "usermenu");
    }

使用 createProfileInformation 我让添加一个水平布局，它添加了两个 div

private HorizontalLayout createProfileInformation(UserDTO user) {
        HorizontalLayout layout = new HorizontalLayout();

        layout.add(createProfileInformationDesktop(user));
        layout.add(createProfileInformationMobile(user));
        layout.setId("loggeduser");
        layout.addClassName("loggeduser");
        return layout;
    }

html中的结果

一切都好。
但不接受 css 样式:(
css 在我的 theme.jar 中

resource/META-INF/resources/themes/mytheme/base.css

.loggeduserdesktop{
  visibility: hidden;
  display: none;
}
.loggedusermobile{
   color: red;
}

稍后它将通过@media 解决
那么，为什么 vaadin 不接受 css 声明呢？

Answer 1

感谢 Discord 中的 Hawk 和 JChristophe。
虽然元素在 MenuBar 中，但样式不会从公共(public)应用。
他们必须被添加到shadowdom中

@CssImport(value = "./loggeduser.css", themeFor = "vaadin-menu-bar")
public class LoggerUser extends Span {

    public LoggerUser() {
    }

    public LoggerUser(String text) {
        super(text);
    }
}