如何在 Ionic 4 中更新 ion-searchbar 的高度？

Question

我正在尝试在 Ionic 4 中使用<ion-searchbar>. 我的问题是搜索栏的高度，我无法操作它。我知道 Ionic 4 是基于 Web 组件的，它将每个组件都包装在一个 shadow DOM 中，但<ion-searchbar>似乎没有 shadow DOM，如下所示：

与其他组件不同，影子 DOM 在节点中可见，如下所示：

这让我觉得我可以在里面覆盖divwith 类searchbar-input-container，<ion-searchbar>但我不能，甚至 Ionic 官方文档也没有涵盖可以实现这一点的任何属性或变量。请帮忙。

Answer 1

在经历了很多麻烦之后，我尝试了一个解决方案，某些人也可以将其视为一种解决方法。我使用transform: scaleCSS 来缩放我的<ion-searchbar>. 所以代码现在变成：

ion-searchbar {        
    transform: scale(1.2); // Can also scale individually with scaleX() and scaleY()
    margin: 0 auto;
    width: 80%; // To avoid pixelate effect that occurs with scaling
}

您也可以使用zoomCSS 属性，zoom: 1.2但根据 MDN文档，建议使用变换而不是缩放。

这允许我们在不访问divwith 类的情况下增加高度searchbar-input-container。