如何解决Ionic 5 (Vue) ion-select 和 ion-select-option 自定义 css 不会改变
所以我在使用 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;
}```
解决方法
ion-select
只公开了一定数量的可以直接使用 CSS 变量设置样式的 CSS 属性,对于其余的 CSS,您需要使用 shadow-root
来设置样式...这个也适用于 ion-select-option
事实上,如果您访问过组件名称右侧的 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。