Change style menu-bar-button

Hi everyone I need to change the style of the menu-bar button: I did this but it doesn’t work.
In the css file:
:host([theme=“custom-menubarbutton-action”])[part$=“button”]
{
background: #f3f5f7;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
}

:host([theme=“custom-menubarbutton-action”])[part$=“button”]:hoover{
background-color: rgb(0 116 189);
color: rgb(255 255 255);
}
In the class java:
@CssImport(value = “./themes/goffice/components/custom-menubarbutton-action.css”, themeFor = “vaadin-menu-bar-button”)
menuBar.getElement().getThemeList().add(“custom-menubarbutton-action”);
Can anyone give me some suggestions!

looks to me that you’re mixing two different ways to add css to components: the theme components folder and @CssImport. You should use either or.

So, remove the @CssImport, and simply rename your stylesheet to vaadin-menu-bar-button.css and it should automatically apply to the right component

Also you misspelled the :hover selector

ah, also, as you’re targeting vaadin-menu-bar-button directly, the [part....] part of the selector is unncessary and invalid, so just remove that

so

```:host([theme=“custom-menubarbutton-action”]) {…}````

and

:host([theme="custom-menubarbutton-action"]):hover {...}

I tried but it doesn’t work

In the part of the Java code I did:
MenuBar menuBar = new MenuBar ();
menuBar.getElement (). getThemeList (). add (“custom-menubarbutton-action”);

right, let’s figure it out.

You should have the following:

  1. A theme annotation pointing to the theme folder @Theme("goffice")

  2. A stylesheet for vaadin-menu-bar-button in goffice/components/vaadin-menu-bar-button.css

  3. The following css in that stylesheet:

    background: #f3f5f7;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

:host([theme="custom-menubarbutton-action"]):hover {
    background-color: rgb(0 116 189);
    color: rgb(255 255 255);
}```

4. The theme name added to the MenuBar `menuBar.getThemeNames().add("custom-menubarbutton-action");`

Come to think of it, some of those styles are probably getting overridden by the deafults

border-radius: 20px !important; may be required

ah, and the hover selector needs to be inside the :host() selector like so:

:host([theme="custom-menubarbutton-action"]:hover) {

If you don’t have a @Theme annotation, you might not want to add it at this point if there’s a lot of other css already applied with @CssImport, as you might end up doing a lot of refactoring. (I’m just assuming you’re using the theme folder mechanism @Theme("goffice") since you have a themes/goffice/components folder)

In that case, it’s probably better to stick to the @CssImport you originally had

Ok! Thank you very much!