Ionic Vue框架中如何调整ion-action-sheet标题字体大小

因为Ionic组件基于Shadow DOM实现，普通CSS选择器无法直接访问组件内部的元素，你之前尝试的--font-size变量并不是Action Sheet标题对应的可配置变量，所以没有效果。

你可以通过Vue的深度选择器::deep穿透Shadow DOM，直接选中标题元素修改字体大小，具体代码如下：

.my-custom-class::deep .action-sheet-header {
  font-size: 25px;
}

如果遇到样式优先级不足的问题，可以加上!important强制生效：

.my-custom-class::deep .action-sheet-header {
  font-size: 25px !important;
}

另外，如果你只需要针对iOS模式调整，可以给选择器加上iOS专属类：

.my-custom-class::deep .action-sheet-header.ion-ios {
  font-size: 25px;
}

你可以通过浏览器开发者工具查看ion-action-sheet的Shadow DOM结构，确认标题元素的类名是否正确，确保选择器能命中目标元素。

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