2017-11-22 14 views
1

ionicアプリケーションのホームページでイオンラベルのフォントサイズを変更したい。 私は__variables.scssファイルのフォントサイズ変数を変更することができますが、これはイオンラベルに影響する可能性があることを読んでいます。私はそれをすることができると思う。 しかし、私はそれがページに関連付けられているscssファイルのイオンラベルをスタイルするのにはうまくいかないというのは奇妙なことに気付きます。私はオンラインで検索しましたが、私のアプローチが有効であること以外は何も見つかりませんでした。イオンラベルのフォントサイズを変更する - イオン性

これは私の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> 

次のように私のページが見えます:

enter image description here

答えて

1

をあなただけこのようにする必要があります:

これはあなたのラベルにクラスを追加し、それを編集することができstackblitz

私-page.html

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

私-page.scss

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

他の方法はありません。ありがとうございます –

0

を働いていますCSS。

Htmlの

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

CSS

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

0

申し訳ありませんが、サンパスとシャハブラウフの答えは私のために動作しません:イオン4と別の命題の下5.

角度:

HTML:

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

SCSS:ここ

page-my-page { 
    .my-label { 
     font-size: 8em; 
     } 
} 

、角度成分のstyleUrls属性に、またはapp.scssにSCSSファイルを追加する必要はありません。

希望します。

関連する問題