更改菜单栏的 Vaadin Valo 主题变量

Question

我在使用 valo 及其 API 更改菜单栏中的一个变量时遇到问题。我只希望 v-font-weight 为 600px。我想我不明白 API 以及要删除的组件。

这是我在 styles.scss 中进行的缩减尝试。

@import "valo";
$v-included-components: remove($v-included-components, menu-item-style);

.myvalo {
  @include valo;

  $v-font-weight: 600;
  @include valo-menubar-menuitem-style();
}

当我检查菜单栏项时，应用的样式如下所示：

Answer 1

我认为这应该作为解决方法：

.myvalo {
  @include valo;

  .valo-menu-item-caption {
        font-weight: 600;
  }
}

虽然 $v-font-weight 被 valo-menu-item-style 使用，所以它应该成功。

Answer 2

正在使用

$v-included-components: remove($v-included-components, menu-item-style);

将不起作用，因为 menu-item-style 不是您可以从 valo 主题中删除的组件。 Valo 组件列表在 _variables.scss 文件的 $v-included-components 变量中声明。您可以在 vaadin's github or on Valo API site 上查看。最接近 menu-item-style 的组件是 menubar.

你可以这样做：

@import "valo";
$v-included-components: remove($v-included-components, menubar);

.myvalo {
    @include valo;

    $v-font-weight: 600;
    @include valo-menubar;
}

但它会将整个 MenuBar 组件的字体粗细设置为 600。

要仅在菜单栏项上设置它，我会使用简单的 css 规则：

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

更改菜单栏的 Vaadin Valo 主题变量

Changing Vaadin Valo theme variables for menu bar

sass

vaadin7

vaadin-valo-theme