Как изменить размер шрифта на входе ion-searchbar в Ioni c 5

Question

Как изменить размер шрифта для ввода ion-searchbar? Может кто-нибудь, пожалуйста, помогите.

<ion-searchbar></ion-searchbar>

Вот что я пытался, но это не работает

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

Пожалуйста, обратитесь к рабочему примеру, который я создал в Stackblitz

Answer 1

Почему в вашем домашнем шаблоне есть тег <style>? Angular (то, что находится под Ioni c), компилятор шаблона не разрешает это и удаляет любой добавляемый вами тег <style>.

Если у вас есть глобальный. css или .s css файл (например, index.s css), чем вы можете просто поместить туда свой стиль .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.s css

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