Невозможно настроить цвет компонента поиска по умолчанию

У меня есть приложение Ionic 3, над которым я работаю, где у меня есть поле поиска. Я пытаюсь раскрасить его темным фоном и белым текстом.

У меня есть следующий код, который отлично работает в фоновом режиме, но значок по умолчанию и текст-заполнитель не становятся белыми:

  .searchbar {
    background-color:#2f303e; 
    color:#fff;
      .searchbar-input {
        background-color:#2f303e; 
        color:#fff;
      }
  }

Вот компонент:

  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

Что мне не хватает?


ionic3 sass scss-mixins
person cnak2    schedule 13.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Посмотрите документацию: https://ionicframework.com/docs/api/components/searchbar/Searchbar/ в разделе переменных Sass есть $searchbar-ios-input-search-icon-color и многие другие переменные, которые вам нужно объявить в theme/variables.scss, просто добавьте их, и все будет в порядке.

Удачного кодирования.. :)

person Ashwani    schedule 13.04.2018

arrow_upward
0
arrow_downward

Используемый значок поиска по умолчанию — это svg (используется в качестве фонового изображения). Его цвет нельзя изменить с помощью color: #fff;

Вместо этого используйте переменные sass, доступные для цвета значка:

ios: $searchbar-ios-input-search-icon-svg

android: $searchbar-md-input-search-icon-color

Для цвета-заполнителя:

ios: $searchbar-md-input-placeholder-color

android: $searchbar-ios-input-placeholder-color

person ashfaq.p    schedule 13.04.2018