Vaadin Labelのキャプションのfont-sizeを小さくする方法は？

Question

私はVaadinにスタイルを追加する方法を知っています。私はCSSで複数のスタイルを設定し、コード内にスタイルを追加しましたが、これは私には分かりません。私は次の二つの方法でそれを設定しようと、何も起こりませんコードで

.v-caption-mystyle .v-captiontext { 
    font-size: 13px !important; 
    font-weight: bold; 
    color: $dark-grey; 
    } 

：

postalCodeLabel= new Label(currentAddress.getPostalCode()); 
postalCodeLabel.setCaption("Postal code")); 
postalCodeLabel.addStyleName("v-caption-mystyle"); 

postOfficeLabel = new Label(currentAddress.getPostOffice()); 
postOfficeLabel.addStyleName("v-caption-mystyle"); 
postOfficeLabel.setCaption("Post office")); 

私は次のようなスタイルを持っているCSSの

：

は、私は次のことを試してみました

編集： Vikrant Thakurの回答が機能します。私の場合は もこれが働いた：

.v-caption-invoiceaddress-label-caption .v-captiontext { 
    font-size: 13px !important; 
    font-weight: bold; 
    color: $dark-grey; 
    } 

とJavaで：

postalCodeLabel = new Label(currentAddress.getPostalCode()); 
postalCodeLabel.setCaption("myCaption")); 
postalCodeLabel.addStyleName("invoiceaddress-label-caption"); 

Answer 1

テーマSCSSファイルのコードです：

@import "../valo/valo.scss"; 

@mixin mytheme { 

    // Insert your own theme rules here 
    .v-caption-mystyle { 
     .v-captiontext { 
      font-size: 13px; 
      font-weight: bold; 
      color: red; 
     } 
    } 

    @include valo; 
} 

そして、ここでのJavaコードは次のとおりです。

Label label = new Label("This is the label text"); 
label.setCaption("This is the label caption"); 
label.addStyleName("mystyle"); 

Answer 2

私はPLabelは、タイプミスやLabelクラスのカスタム実装のいずれかであると仮定しています。その場合、Labelクラスのキャプションを設定していても、CSSクラスはv-labelです。だからあなたのCSSはこのように見えるはずです。ここで

.v-caption-mystyle { 
    font-size: 13px !important; 
    font-weight: bold; 
    color: $dark-grey; 
    }