关于angular：在单个页面中更改离子标签的字体大小-Ionic


change font size of ion-label in a single page - Ionic

我想在离子应用程序的主页中更改离子标签的字体大小。
我已经读到可以更改__variables.scss文件中的字体大小变量，这可能会影响离子标签。我想我可以做到。
但是我感到奇怪的是，在与页面关联的scss文件中设置ion-label的样式无效。我已经在网上搜索过，但是除了我的方法应该可以工作外，我什么都找不到。

这是我的scss：

1
2
3
4
5
6
7
8
9
10
11
12
$primary-color: #cf810c;
$bg-color: #CCFFFF;

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

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

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

我的页面如下所示：

enter image description here

您只需要这样做：

这是工作中的闪电战

my-page.html

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

my-page.scss

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

与其他答案一样，我不鼓励使用自己的字体大小值/类。 Ionic具有已定义的字体大小，可为已定义的h1，h2，...，small和其他标签缩放。看到这里：https://github.com/ionic-team/ionic/blob/master/core/src/css/typography.scss#L34

我建议您只用<ion-label>包装这些标签之一，以便在您的应用中使用一致的字体值：

1
2
3
4
5
<ion-item
    <ion-label>
        <small>Foo Bar</small>
    </ion-label>
</ion-item>

对不起，但Sampath和Shahab Rauf的答案对我不起作用：离子4和角5。

另一个命题：

HTML：

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

SCSS：

1
2
3
4
5
page-my-page {
    .my-label {
        font-size: 8em;
      }
}

此处，不需要将SCSS文件添加到Angular组件的styleUrls属性或app.scss中。

希望它会有所帮助。

您可以在标签中添加一个类，然后在CSS中对其进行编辑。

Html

1
<ion-label class="testclass">Your Label</ion-label>

CSS

.testclass{ font-size: 30px !important; }