Ionic 7.8：如何为ion-input实现自定义样式？

我想要实现这样一种自定义输入组件样式：左侧显示标签文本，右侧输入区域带有底部边框，输入文本和右侧的单位文本垂直对齐，整体高度紧凑。这种效果用原生CSS很容易实现，但在Ionic 7.8里调整组件样式却异常繁琐。

目前我已经编写了相关代码，但还存在两个核心问题：

• 无法控制ion-input元素的高度；
• 找不到合适的方式居中或调整输入文本的位置（单位文本所在的div可以直接调整，相对容易）。

当前实现的效果和预期有差距：输入框高度不符合要求，输入文本的垂直位置错位，和单位文本的对齐效果不理想。

HTML代码 #

<ion-item
  [ngClass]="classes"
  class="monkey-ion-item"
  lines="none">

  <!-- Label Text -->
  <span class="label-span"> {{ label }} </span>

  <!-- User Input -->
  <ion-input
    #ionInputEl
    [value]="inputModel"
    (ionInput)="onInput($event)"
    (ionBlur)="onBlur()"
    class="monkey-ion-input right-aligned"
  >

    <!-- Label -->
    <div slot="label" class="monkey-input-label">{{ units }}</div>

  </ion-input>

</ion-item>

SCSS代码 #

/** Main Styles */
.monkey-ion-item {
  --padding-start: 0;
  --inner-padding-end: 0;

  // height: 42px;

  --background: transparent;

  width: 100%;
  display: flex;
  align-items: bottom;

  .label-span {
    @extend .text-medium;

    flex: 1;
    margin-right: 8px;
    white-space: nowrap;        // prevent wrapping
    overflow: hidden;           // handle overflow
    text-overflow: ellipsis;    // show ... when text is too long
  }


  .monkey-ion-input {
    @extend .text-medium;

    --background: transparent;
    max-width: 120px;
    transition: border-color 0.2s ease;

    border-bottom: 1px solid var(--dark-gray);  // Move the border to the container

    &:focus-within {  // Change border when input is focused
      border-bottom-color: var(--lines-and-text);
    }

    .monkey-input-label {
      color: var(--gray);
      transform: translateY(7px); // moves label (units) down
    }
  }
}

我之前尝试用::ng-deep修改元素样式有一定效果，但这种方式并不合规，现在想寻求更合理的解决方案。

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