更改 Ionic 5 中离子搜索栏输入的字体大小

Question

如何更改 ion-searchbar 输入的字体大小？谁能帮帮忙

<ion-searchbar></ion-searchbar>

这是我尝试过的方法，但这不起作用

.searchbar-input {
  font-size: 10px;
}

请参考我在Stackblitz

中创建的工作示例

Answer 1

为什么您的主页模板文件中有 <style> 标签？ Angular（Ionic 在下面有什么）模板编译器不允许它，并将删除您添加的任何 <style> 标签。

如果您有全局 .css 或 .scss 文件（例如 index.scss），那么您可以简单地将 .searchbar-input 样式放在那里，它应该工作。

我能想到的另一种方法是，将 encapsulation: ViewEncapsulation.None 添加到您的 HomePage 组件，这并不理想或者可能会破坏一些东西，但仍然应该有效。

查看演示：https://stackblitz.com/edit/ionic-ionsearchbar-styling-vda1eu

我的意思是：

home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['./home.scss'], // added
  encapsulation: ViewEncapsulation.None // added
})
export class HomePage { /*... */ }

home.scss

.searchbar-input {
  font-size: 10px !important;
}

Answer 2

这是我在 Ionic 5 中的解决方案:

Global.css

.searchbarinput {
    input{
       font-size: 20px !important;  
    }
}

在搜索页面中：

<ion-searchbar #searchbar (ionInput)="getProdForSearch($event)" class="searchbarinput" placeholder="Buscar produtos..." search-icon="search-sharp"></ion-searchbar>

Answer 3

在离子 5 中

global.scss

ion-searchbar {
    .searchbar-input-container {
        input{
            font-size: 14px !important;
        }
    }
}

更改 Ionic 5 中离子搜索栏输入的字体大小

Change font size for ion-searchbar input in Ionic 5

html

css

ionic-framework

ionic5