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

Question

我知道这是在 CSS(以及 SCSS)中完成的，但我正在努力解决如何设置样式以使 MenuBar 看起来像文本的问题。我对 MenuItems 没有意见，我只希望 MenuBar 本身看起来像链接。一个很好的例子是 StackOverflow 顶部的帮助链接，就在屏幕顶部搜索框的左侧。

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

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

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

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

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

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

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

Answer 1

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

menuBar.setStyleName(ValoTheme.MENUBAR_BORDERLESS);