Vaadin - 如何自定义 MenuBar 使其看起来像链接

Vaadin - How to customize MenuBar to look like links

我知道这是在 CSS 中完成的(好吧 SCSS),但我正在努力研究如何设置它的样式以使 MenuBar 看起来像文本。我同意 MenuItems 的现状,我只希望 MenuBar 本身看起来像 link。一个很好的例子是 Whosebug 顶部的帮助 link,就在屏幕顶部搜索框的左侧..

默认情况下,在 Vaadin 中它看起来像按钮,当我单击它们时,按钮会突出显示并具有如下所示的额外边框颜色:

我想删除所有这些,让它看起来像您点击的 link。 MenuItem 样式很棒,但我只是想让它看起来像文本。我喜欢向下的胡萝卜,以及 MenuItems 的样式,我只是想更改 MenuBar。下面是一个例子:

我一直在摆弄 css 有一段时间了,就是找不到合适的样式。任何帮助将不胜感激。同样,我只是想删除 MenuBar 的样式,仅此而已。到目前为止我有:

  .myMenuBar
  {
    border: none;
    background-image: none;
    background-color: myBackgroundColor;
    box-shadow: none;
  }

问题是我仍然在努力处理一些样式元素:

例如,当我点击时,我仍然有一个蓝色突出显示的按钮。弹出菜单也以我的自定义颜色为背景。我在两个元素之间也有一条黑色分隔线。虽然很难看到 MenuBar 上方和下方有一条白色和灰色的细线以显示一些深度。

更新:添加了一些 css 改进,但我还有很长的路要走。

即使有了问题下方评论中的链接,我仍然难以找到解决方案。最终我 运行 进入了 Class ValoTheme 并发现我可以用一行代码做我想做的事情。事实上,它比我计划的要好,感谢主题设计师!

menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);