如何在离子选择器中更改取消/完成按钮的颜色

Question

我想更改完成/按钮的颜色，取消应为红色，完成应为绿色

我已经尝试过了：

ion-picker{
  .picker-toolbar-cancel{
    color: red !important;
  }
}

.ui-datepicker {
  color: red;
}

ion-picker > div > div > div > button {
  color: red;
}

这是我的html：

        <ion-datetime
          displayFormat="DD/MM/YYYY"
          pickerFormat="DD MMM YYYY">
        </ion-datetime>
       <span class="caption2">até</span>
        <ion-datetime
          displayFormat="DD/MM/YYYY"
          pickerFormat="DD MMM YYYY">
        </ion-datetime>

Answer 1

发生问题是因为日期纠察器是在应用程序的根目录而不是组件内部设置的。

解决方案之一是在global.scss中使用选择器，但这将适用于整个应用程序的所有离子日期时间。

另一种选择是为按钮设置一个类，并在global.scss内部对其进行修改，例如：

global.scss：

.picker-button.sc-ion-picker-md.test{
  background: forestgreen;
}

HTML：

<ion-datetime [pickerOptions]="customPickerOptions" 
              displayFormat="DD/MM/YYYY" 
              pickerFormat="DD MMM YYYY">
  </ion-datetime>

TS：

customPickerOptions: any;
constructor() {
    this.customPickerOptions = {
      buttons: [{
        color: 'red',
        text: 'Save',
        cssClass: 'test',
        handler: () => console.log('Clicked Save!')
      }, {
        text: 'Log',
        handler: () => {
          console.log('Clicked Log. Do not Dismiss.');
          return false;
        }
      }]
    }
  }

这将阻止在整个应用程序中进行操作