Ionic-4 колесо выбора / кнопки выбора настройки css

Question

Я сталкиваюсь с трудностями при настройке кнопок выбора колес и линий сплиттера.Я хочу изменить цвет кнопок и линий по умолчанию, но не вижу способа его настройки.

Есть ли способ настроить его стиль, как мы это делаем в ionic-alert-controller.

Любой ответ будет большой помощью.: P

Answer 1

Я тоже сталкивался с этой проблемой.По сути, вам нужно передать имена классов в свойство 'cssClass' при создании средства выбора

const p = await this.pickerCtrl.create({
  columns : [
    ...
  ],
  buttons : [
    ...
  ],
  cssClass : 'pickerClassName'
});

В документации Ionic вы можете найти список свойств css, которые вы можетевведите в этот класс: https://ionicframework.com/docs/api/picker#css-custom-properties

Теперь проблема в том, что в этом списке нет свойства для определения цвета текста, поэтому я немного углубился в структуру элементов и сделал это следующим образом:

В моем "app.scss":

// Set the "secondary" color to the picker
.pickerClassName{

  // Border color (from the docs)
  --border-color: var(--ion-color-secondary);

  // Buttons color
  .picker-button {
    color : var(--ion-color-secondary);
  }

  // Options color
  .picker-opt {
    color : var(--ion-color-secondary);
  }

  // Selected option color
  .picker-opt-selected {
    color : var(--ion-color-secondary);
  }

  // Prefix color
  .picker-prefix {
    color : var(--ion-color-secondary);
  }

}