向ion-select添加自定义样式

Question

我有一个离子选择与几个选项，我给了一个标题使用selectOptions，有没有办法定义一个css，以便我可以设置背景颜色的标题，按钮对齐，并添加一个图标的标题

 <ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
         <ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
 </ion-select>

有人能帮帮我吗？

Answer 1

现在你可以很容易的解决这个问题了，

添加到离子选择元素：

[interfaceOptions]="{cssClass: 'my-class'}"

添加到css：

.my-class .alert-wrapper {
    max-width: 94% !important;
}

Answer 2

可以，您可以在选项中使用cssClass，如下所示：

// In your component
daysOptions = {
    cssClass: 'my-class',
    ...,
}

然后在css中，你可以做你想做的事情，例如：

.my-class .alert-wrapper {
    max-width: 94% !important;
}

感谢ionic docs：https://ionicframework.com/docs/api/components/alert/AlertController/#advanced

Answer 3

几个月前我需要一个颜色选择器，但我找不到。做到这一点的唯一方法是使用定制的CSS。我尝试向ion-select和ion-option添加CSS类，但这些类没有反映在生成的输出中。因此，将自定义CSS应用于ion-select和ion-options的唯一方法是使用父元素和一些JS。

您可以在: HTML：https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html中检查逻辑

TS：https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts

SCSS：https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss