Wie verkleinert sich die Schriftgröße der Beschriftung eines Vaadin Labels?

Question

Ich weiß, wie man Stile in Vaadin hinzufügt und ich habe mehrere Stylings in meinem CSS gemacht und den Stil im Code erfolgreich hinzugefügt, aber dieser entzieht sich mir.

Ich habe versucht, die folgenden:

in der CSS ich folgende Stil:

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

Im Code versuche ich es in zwei folgenden Arten zu setzen und nichts passiert:

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")); 

EDIT: Vikrant Thakur Antwort funktioniert. In meinem Fall auch das funktionierte:

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

Und in der Java:

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

Answer 1

Hier ist der Code für Thema SCSS Datei:

@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; 
} 

Und hier ist der Java-Code:

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

Answer 2

Ich gehe davon aus PLabel ist entweder ein Tippfehler oder eine benutzerdefinierte Implementierung der Label-Klasse. Wenn dies der Fall ist, ist es einfach, dass, obwohl Sie die Beschriftung der Label-Klasse festlegen, es CSS-Klasse ist V-Label. Dein CSS sollte also so aussehen.

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