Problem with styling MenuBar and Div

Flow
1

Hi,

does anybody know how can I seperate styling from code? I want to put all this styling to .css file. How can I do it? This is example from Vaadin Start.

            Avatar avatar = new Avatar(user.getName());
            StreamResource resource = new StreamResource("profile-pic",
                    () -> new ByteArrayInputStream(user.getProfilePicture()));
            avatar.setImageResource(resource);
            avatar.setThemeName("xsmall");
            avatar.getElement().setAttribute("tabindex", "-1");

            MenuBar userMenu = new MenuBar();
            userMenu.setThemeName("tertiary-inline contrast");

            MenuItem userName = userMenu.addItem("");
            Div div = new Div();
            div.add(avatar);
            div.add(user.getName());
            div.add(new Icon("lumo", "dropdown"));
            div.getElement().getStyle().set("display", "flex");
            div.getElement().getStyle().set("align-items", "center");
            div.getElement().getStyle().set("gap", "var(--lumo-space-s)");
            userName.add(div);

I want to separate MenuBar and Div styling.
I found that the Div is #shadow-root (https://vaadin.com/docs/latest/styling/advanced/shadow-dom-styling) Currently I am using Vaadin 23.

2

Have you read the Getting Started section in the Styling docs? https://vaadin.com/docs/v23/styling/getting-started

3

Since everything inside a V23 MenuBar is inside the MenuBar’s shadow DOM, you need to inject the CSS for it into that.

Assuming you have a theme folder, you’d create a stylesheet components/vaadin-menu-bar.css – that will be automatically injected into the MenuBar through its file name.

Then, to target that Div specifically, you should apply a css classname to it, e.g. user-menu-item-layout, and use that as selector, e.g.

.user-menu-item-layout {
  display: flex;
  align-items: center;
  gap: var(--lumo-space-s);
}```

That classname selector will work inside that particular stylesheet because it will be injected into the shadow dom where the div is located.