vaadin 在菜单中为 div 应用 css-classname

问题描述

我在一个简单的水平布局中使用了两个 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，我添加了一个horizontalLayout，它添加了两个 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-styles :( css 在我的 theme.jar 中

resource/meta-inf/resources/themes/mytheme/base.css

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

稍后用@media解决

那么，为什么 vaadin 不接受 css 声明？

解决方法

感谢 Discord 中的 Hawk 和 JChristophe。

虽然元素位于 MenuBar 中，但不会从公共应用样式。它们必须添加到 shadowdom 中

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

    public LoggerUser() {
    }

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

styled-components vaadin