更改菜单栏的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

使用

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

赢了，因为menu-item-style不是您可以从valo主题中删除的组件。 Valo组件＆＃39; list在$v-included-components文件的_variables.scss变量中声明。您可以在vaadin's github或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;
}

Answer 2

我认为这应该是一种解决方法：

.myvalo {
  @include valo;

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

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