Issue
I want to change the font size of a ion-label in the home page of a ionic app. I have read that I can change the font size variables in the __variables.scss file, which could affect the ion-label. I think I could do that. But I find it strange that it doesn't work to style the ion-label in the scss file associated with the page. I have searched online but I couldn't find anything about it, other than that my approach should work.
This is my scss:
$primary-color: #cf810c;
$bg-color: #CCFFFF;
page-home {
.masters{
background-color:$bg-color;
}
ion-label{
color: $primary-color;
font-size: 4em;
}
}
And this is the content in my html file:
<ion-content padding class="masters">
<ion-label stacked>Tap and press the buttons to win!</ion-label>
</ion-content>
My page looks as follows:
Solution
You just need to do like this:
This is working 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;
}
Answered By - Sampath
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.