更改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組件的列表在$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; 
} 

但它將字體粗細設置爲600整個MenuBar組件。

要設置只在菜單欄項目，我會用簡單的CSS規則：

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

Answer 2

我認爲這應該由它作爲一個解決辦法：

.myvalo { 
    @include valo; 

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

雖然$v-font-weight是由valo-menu-item-style使用，所以它應該做的工作。