メニューバーの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(); 
} 

私はスタイルがこのようなルックスを適用し、メニューバーの項目を検査する場合：

.myvalo { 
    @include valo; 

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

$v-font-weightですが：

Answer 1

は動作しません。 Valoコンポーネントのリストはファイルの$v-included-components変数で宣言されています。 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にフォントウェイトを設定します。私はこれをしようとしているが、それはまだ働いて見ることができない

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

Answer 2

私はこれが回避策として、それを作っべきだと思いますvalo-menu-item-styleで使用されているので、ジョブを作成する必要があります。 menu-item-styleあなたはVALOのテーマから削除することができコンポーネントではありませんので、

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

を使用して