Ionic-4滚轮选取器/选择器按钮css自定义

Question

我正面临着困难，在样式的车轮机械臂按钮和分割线。我想更改按钮和线条的默认颜色，但我看不到任何自定义的方法。

有没有办法像我们在in alert-controller中那样定制它的样式。

任何回应都将是一个很大的帮助。:P

Answer 1

我也遇到过这个问题。基本上，您需要做的是在创建选择器时将类名传递给'cssClass‘属性

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

在离子文档中，您可以找到可以输入到此类的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);
  }

}