更改 Ionic 5 中 ion-searchbar 输入的字体大小

Question

如何更改ion-searchbar输入的字体大小？有人可以帮忙吗？

<ion-searchbar></ion-searchbar>

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

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

请参考我在Stackblitz中创建的工作示例

Answer 1

在离子 5 中全局.scssion-searchbar {    .searchbar-input-container {        input{            font-size: 14px !important;        }    }}

Answer 2

这是我在 Ionic 5 中的解决方案：全局.css.searchbarinput&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;input{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;20px&nbsp;!important;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} }在搜索页面中：<ion-searchbar&nbsp;#searchbar&nbsp;(ionInput)="getProdForSearch($event)"&nbsp;class="searchbarinput"&nbsp;placeholder="Buscar&nbsp;produtos..."&nbsp;search-icon="search-sharp"></ion-searchbar>

Answer 3

为什么你<style>的主页模板文件中有标签？Angular（Ionic 的底层）模板编译器不允许这样做，并且会删除<style>您添加的任何标签。如果您有全局 .css 或 .scss 文件（例如 index.scss），那么您可以简单地将.searchbar-input样式放在那里，它应该可以工作。我能想到的另一种方法是添加encapsulation: ViewEncapsulation.None到您的HomePage组件中，这并不理想或可能会破坏某些东西，但仍然应该有效。查看演示：https://stackblitz.com/edit/ionic-ionsearchbar-styling-vda1eu我的意思是这样的：主页.ts@Component({  selector: 'page-home',  templateUrl: 'home.html',  styleUrls: ['./home.scss'], // added  encapsulation: ViewEncapsulation.None // added})export class HomePage { /*... */ }主页.scss.searchbar-input {  font-size: 10px !important;}