如何在Ionic 4中更新离子搜索条的高度？

Question

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

与其他组件一样，在这些组件中可以在节点内看到影子DOM：

这使我认为我可以在div中用类searchbar-input-container覆盖<ion-searchbar>，但是我不能，甚至Ionic官方文档也没有涵盖任何属性或变量。这可以实现。请帮忙。

Answer 1

在遇到很多麻烦之后，我尝试了一种解决方案，也有人认为这是一种解决方法。我使用transform: scale的CSS来缩放<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
}

您也可以将zoom CSS属性用作zoom: 1.2，但根据MDN docs，建议在 zoom 上使用 transform 强>。

这使我们可以增加高度，而无需访问类div的{​​{1}}。