Ionic框架中如何修改ion-button的行高？

要修改ion-button的行高，你可以通过CSS Shadow Parts穿透Shadow DOM来实现，具体步骤如下：

可行的CSS写法 #

直接定位到ion-button内部暴露的原生按钮元素，设置行高：

.row-button ion-button::part(native) {
  line-height: 1.8; /* 根据需求调整数值 */
}

如果按钮文本换行后需要更舒适的垂直间距，可配合内边距调整：

.row-button ion-button::part(native) {
  line-height: 1.8;
  padding-block: 12px; /* 同时设置上下内边距 */
}

为什么之前的选择器无效？ #

Ionic组件采用Shadow DOM封装内部结构，普通CSS选择器（比如.row-button ion-button button）无法穿透Shadow DOM访问内部元素。只有通过组件官方暴露的part属性，才能用::part()选择器定位到内部样式节点。ion-button的原生按钮元素默认暴露了native这个part，因此可以通过该方式修改行高。

你的代码示例 #

<ion-row class="row-button ion-justify-content-center">
  <ion-col>
    <ion-button expand="full">
      <ion-icon name="logo-whatsapp" size="large" slot="start"></ion-icon>
      Get in touch for more information
    </ion-button>
  </ion-col>
</ion-row>

内容的提问来源于stack exchange，提问作者Victor Soares