将自定义样式添加到 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

几个月前我需要一个颜色选择器，但我找不到。 做到这一点的唯一方法是使用自定义 CSS。我尝试将 CSS 类添加到 ion-select 和 ion-option，但这些类没有反映在生成的输出中。因此，将自定义 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

Answer 3

是的，您可以像这样在选项中使用 cssClass：

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

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

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

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