angular - 在单个页面中更改 ionic 标签的字体大小 - Ionic

Question

我想更改 ionic 应用程序主页中 ion-label 的字体大小。我读过我可以更改 __variables.scss 文件中的字体大小变量，这可能会影响 ionic 标签。我想我可以做到。但我觉得奇怪的是，在与页面关联的 scss 文件中设置 ionic 标签的样式不起作用。我在网上搜索过，但找不到任何相关信息，除了我的方法应该有效。

这是我的 scss:

$primary-color: #cf810c;
$bg-color: #CCFFFF;

page-home {
    .masters{
        background-color:$bg-color;
    }
    ion-label{
        color: $primary-color;
        font-size: 4em;
   }
}

这是我的 html 文件中的内容:

<ion-content padding class="masters">
  <ion-label stacked>Tap and press the buttons to win!</ion-label>
</ion-content>

我的页面如下所示:

Answer 1

你只需要这样做:

这是有效的 stackblitz

my-page.html

  <ion-label stacked class="my-label">Tap and press the buttons to win!</ion-label>

my-page.scss

.my-label {
  font-size: 4em;
}