ionic-framework - Ionic 5 (Vue) 离子选择和离子选择选项自定义 css 不会改变

Question

所以我对 ionic 5 for vue 有问题，我正在使用 ion-select & ion-select-option 组件。所以我想做的事情是

1. 改变宽度
2. 当内容足够长时， ion-select-option 中的文本将中断并向下创建新行

我已经尝试过 variable.css 但仍然无法正常工作

所以这是我的CSS代码

  width: 100%;
}
.sc-ion-alert-md-h{
    --min-width: 90% !important;
}
.alert-wrapper.sc-ion-alert-md{
    color: red;
}
.select-full-width {
  /* max-width: 100% !important; */
  /* width: 100% !important; */
  padding-left: 0 !important;
  --max-width: 700% !important;
}
.alert-wrapper .sc-ion-alert-md {
  /* width: 700% !important; */
  --max-width: 700% !important;
}
.alert-radio-label .sc-ion-alert-md {
  text-overflow: unset !important;
  white-space: unset !important;
}```

Answer 1

ion-select只公开了一定数量的 CSS 属性，可以直接使用 CSS 变量设置样式，对于其余的 CSS，您需要使用shadow-root它来设置样式......这也适用于ion-select-option

事实上，如果您访问过组件名称右侧的 Ionic 文档，您会看到一个小芯片，上面写着阴影，这表明如果您希望设置此组件的样式，您需要使用shadow-root

这是一个如何在组件内部完成 shadow-root 的示例

/* Set the text color */
ion-select::part(text) {
  color: #545ca7;
}

/* Set the icon color and opacity */
ion-select::part(icon) {
  color: #971e49;
  opacity: 1;
}