如何修改ion-select选中项颜色？color属性设置tertiary不生效怎么办

生效修改方案 #

你遇到的是ion-select的color属性在MD模式下作用范围有限的问题，该属性默认仅作用于组件下划线、占位符样式，选中文本和弹出层选中项样式需要通过CSS变量手动覆盖：

1. 先给组件添加自定义类标识，避免样式污染全局

修改你的组件代码如下：

<form [formGroup]="form">
  <ion-select
    mode="md"
    formControlName="sortBy"
    placeholder="Sort By"
    interface="popover"
    class="custom-tertiary-select"
    [interfaceOptions]="{cssClass: 'custom-tertiary-popover'}"
    (ionChange)="sortBy($event)"
  >
    <ion-select-option value="1">Newest</ion-select-option>
    <ion-select-option value="2">Oldest</ion-select-option>
    <ion-select-option value="3">Near Me</ion-select-option>
  </ion-select>
</form>

2. 对应添加样式（推荐写入全局global.scss文件，避免Angular视图封装导致样式不生效）

/* 改选择器本身展示的选中文本颜色 */
.custom-tertiary-select {
  --color: var(--ion-color-tertiary);
  --text-color: var(--ion-color-tertiary);
}

/* 改弹出层选中项的高亮颜色 */
.custom-tertiary-popover .select-interface-option[aria-selected="true"] {
  --color: var(--ion-color-tertiary) !important;
  --background: var(--ion-color-tertiary-tint); /* 可选：修改选中项背景色 */
}

如果样式还是不生效，可以在属性后加!important强制覆盖Ionic默认样式优先级。

内容的提问来源于stack exchange，提问作者Sampath