想要更改背景颜色（或将粗体文本置于当前的VAADIN菜单栏项目选项

Question

）当我的菜单项被选中时，我想置入不同的颜色。 我的菜单是：

对于这一点，代码：

/** 
    * Create a Vertical Menu with the Home page and Actions page 
    */ 
    public MenuBar createMenu() { 
     MenuBar menuBar = new MenuBar(); 
     menuBar.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage()); 
     menuBar.addItem(StringConstants.MENU_ACTIONS_LABEL, VaadinIcons.TABLE, createCommandActions()); 
     menuBar.addItem(StringConstants.MENU_LOG_OUT_LABEL, VaadinIcons.SIGN_OUT, createCommandLogOut()); 
     return menuBar; 
    } 

    /** 
    * Create the command when the Home page has been selected in the menu 
    */ 
    private Command createCommandHomepage() { 
     return new Command() { 
      @Override 
      public void menuSelected(final MenuBar.MenuItem selectedItem) { 
       selectedItem.setStyleName("caption"); 
       UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME); 
      } 
     }; 
    } 
    /** 
    * Same for the Action and Log out - it's not important to show the code here 
    */ 

于是，我就放大胆当前的选择（我试图改变背景太）。

所以我SCSS代码为：

.v-menubar-menuitem-selected{ 
      font-weight: bold; 
    } 

    .caption { 
     font-weight: bold; 
    } 

，这是不工作的。 不过：

.v-menubar-menuitem-caption{ 
      font-weight: bold; 
    } 

工作，但它会把所有的标题加粗，而不仅仅是当前的选择。

我不知道我做错了什么。

编辑：我编译vaadin主题：

 <plugin> 
      <groupId>com.vaadin</groupId> 
      <artifactId>vaadin-maven-plugin</artifactId> 
      <version>8.0.6</version> 
      <executions> 
       <execution> 
        <goals> 
         <goal>update-theme</goal> 
         <goal>update-widgetset</goal> 
         <goal>compile</goal> 
         <goal>compile-theme</goal> 
        </goals> 
       </execution> 
      </executions> 
     </plugin> 

不过，我运行一个行家清洁套装，以确保我建的主题。

编辑2：从pom.xml的Vaadin版本：

<dependency> 
    <groupId>com.vaadin</groupId> 
    <artifactId>vaadin-bom</artifactId> 
    <version>8.0.4</version> 
    <type>pom</type> 
    <scope>import</scope> 
</dependency> 

Answer 1

此解决方案正在工作。但是，我认为这不是最好的。所以，请提供一个更好的答案。

我使用会话保存菜单级别：

String menuTabSelected =(String)VaadinSession.getCurrent().getAttribute("menuState"); 
MenuBar barmenu = new MenuBar(); 
barmenu.addStyleName("mybarmenu"); 
layout.addComponent(barmenu); 

String homepageStyle = menuTabSelected == null || menuTabSelected.equals(StringConstants.MENU_HOMEPAGE_LABEL) ? "highlight" : null; 

barmenu.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage()).setStyleName(homepageStyle); 


private Command createCommandHomepage() { 
    return new Command() { 
     @Override 
     public void menuSelected(final MenuItem selectedItem) { 

      VaadinSession.getCurrent().setAttribute("menuState", selectedItem.getText()); 

      UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME); 
     } 
    }; 
} 

在mytheme.scss：

.mybarmenu .v-menubar-menuitem-highlight { 
    background: #dedede; 
    font-weight: bold; 
} 

Answer 2

从Vaadin 8 Docs：

...提防菜单项选择的风格，那就是， v-menubar-menuitem-selected，被保留鼠标悬停指示。

试试这个：

.myTheme .v-menubar-menuitem-highlight { 
    background: #000040; 
} 

和代码：

menuBar.addStyleName("myTheme"); 

还记得从你的浏览器清除缓存。