如何使Vaadin标签的字体大小变小？

Question

我知道如何在Vaadin中添加样式，并且我已经在我的css中完成了多个样式，并且在代码中成功添加了样式，但是这个样式让我望而却步。

我尝试了以下内容：

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

编辑： 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

我假设PLabel是拼写错误或Label类的自定义实现。如果是这种情况，那么即使您在Label类上设置标题，它的CSS类也是v-label。所以你的CSS应该是这样的。

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

Answer 2

以下是主题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");