Ionic 5 (Vue) 离子选择和离子选择选项自定义 css 不会改变答案

【问题标题】：Ionic 5 (Vue) ion-select & ion-select-option custom css wont changeIonic 5 (Vue) 离子选择和离子选择选项自定义 css 不会改变
【发布时间】：2021-03-18 15:53:09
【问题描述】：

所以我在使用 ionic 5 for vue 时遇到问题，我正在使用 ion-select 和 ion-select-option 组件。所以我想做的事情是

改变宽度
当内容足够长时，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;
}```

【问题讨论】：

标签： ionic-framework ionic5 ionic-vue

【解决方案1】：

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

事实上，如果您访问过组件名称右侧的 Ionic 文档，您会看到一个小芯片，上面写着 shadow，这表明如果您希望设置此组件的样式，您需要制作使用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;
}

【讨论】：