如何使 Vaadin 标签标题的字体大小更小？答案

【问题标题】：How to make the font-size of the caption of a Vaadin Label smaller?如何使 Vaadin 标签标题的字体大小更小？
【发布时间】：2017-06-17 22:16:56
【问题描述】：

我知道如何在 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");

【问题讨论】：

标签： java css font-size vaadin7 caption

【解决方案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");

【讨论】：

不要忘记删除浏览器历史记录以加载新的 CSS。
它有效。 .v-captiontext 对我来说似乎是缺失的部分。我会将您的答案标记为正确答案，并在我的问题描述中添加对我有用的版本。
实际上，规则的顺序在这里很重要。将“@include valo”放在自定义规则之前无效。

【解决方案2】：

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

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

【讨论】：

对错字进行了更正。谢谢，我现在就试试这个。
嗯，还是没有效果。
在 chrome 中检查您的标签。它将显示每个 CSS 属性的来源。
我已经更新了 css，而不是指 v-label 应该可以工作。