可以改变离子导航栏内的离子标题大小吗？

Question

<ion-navbar color="primary">
  <ion-title>Atualizado em: {{ultimaAtualizacao |  date:'dd/MM/yyyy'}}</ion-title>
</ion-navbar>

我想更改离子标题的文本大小,我已经尝试过使用css,但它没有改变.

Answer 1

1. 如果要为应用程序的每个页面更改它,可以使用sass变量.您需要在variables.scss文件中添加以下内容:

   $toolbar-ios-title-font-size: 1.7rem;
   $toolbar-md-title-font-size: 2rem;
   $toolbar-wp-title-font-size: 1.5rem;
   

   这些是默认值,因此您可以设置所需的值.

2. 如果只想在一个页面中进行更改,则不应使用sass变量.相反,在该页面的scss文件中使用简单的css规则:

   your-page {
   
     toolbar-title toolbar-title-ios { 
       font-size: 1.7rem;
     }
   
     toolbar-title toolbar-title-md { 
       font-size: 2rem;
     }
   
     toolbar-title toolbar-title-wp { 
       font-size: 1.5rem;
     }
   
   }
   

编辑:

如果使用css规则不起作用,则可能是与这些规则的特殊性相关的问题.你可以试着像这样包装页面的样式:

.ios, .md, .wp {

  your-page {

    // Put your css rules here!

  }

}

通过这样做,您可以提高自定义css规则的特异性,并覆盖Ionic的css规则.

Answer 2

根据官方 API 文档，可以覆盖 SASS 变量。 一探究竟...