Vaadin - ダイナミックレイアウトの背景

Question

ボタンのクリックでレイアウトの背景イメージを変更しようとしています。私は最初にバックグラウンドを追加するためにCSSルールを使用し、CSSルールをオーバーライドしようとしたボタンクリックイベントで使用しました。コード

private void setImage(String url) { 
     Styles styles = Page.getCurrent().getStyles(); 
     styles.add(".appname .v-desktop {" 
      +"background: url(icons/img.jpg) no-repeat center center fixed;" 
      +"-webkit-background-size: cover;" 
      +"-moz-background-size: cover;" 
      +"-o-background-size: cover;" 
      +"background-size: cover;}"); 
    } 

をオーバーライド

.appname .v-desktop { 
    background: url(icons/material_wallpaper.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

期待どおりに動作しません。ブラウザのinspect要素機能からCSS規則をチェックすると、CSS規則が正しく上書きされます。 あなたはボタンのクリックにスタイル（たとえば、「変更 - バックグラウンド」）を追加する必要があります任意の助け

Answer 1

：

button.addClickListener(...){ 
    myLayout.addStyleName("changed-background"); 

} 

あなたのテーマのSCSSファイルでは、カスタムスタイルを追加

.changed-background{ 
    background: url(icons/material_wallpaper.jpg) no-repeat center center fixed; 
} 

を