Ionic ion-button边框宽度样式异常问题排查求助

问题复现 #

使用Ionic 7.8开发时，自定义ion-button的--border-width CSS变量始终不生效，实际显示为3px，但--border-radius、--color等其他CSS变量均正常工作。

简化代码示例：

组件模板 #

<ion-button
  [ngClass]="classes"
  [disabled]="disabled"
  (click)="onClick()">
  {{ text }}
  <ion-icon *ngIf="iconName" slot="end" src="svg/{{iconName}}.svg"></ion-icon>
</ion-button>

样式代码 #

ion-button {
  // Rounded Corners
  --border-radius: var(--button-radius);
  --border-width: 1 px; // 注意数值与单位间存在空格

  // Defaults
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none !important;
  padding: 0;
  margin: 0;
  box-sizing: border-box !important;
  --box-shadow: 0;

  @extend .text-button-label;

  &.monkey-theme-secondary {
    --color: var(--text-lines, #00272E);
    --background: transparent;
    --border-style: solid;
    --border-color: var(--text-lines, #00272E);
    --border-width: 2 px; // 同样存在空格问题
  }
}

根本原因解析（基于Stencil运行机制） #

Ionic组件基于Stencil构建，ion-button采用Shadow DOM实现样式隔离，CSS变量是少数能穿透Shadow DOM的样式手段，但Stencil与Ionic对CSS变量的解析有严格规则：

1. CSS变量值的语法合法性校验
   Stencil组件在读取外部传入的CSS变量时，会通过内部样式解析逻辑校验值的语法是否符合CSS规范。你的代码中--border-width: 1 px;存在数值与单位之间的空格，属于无效CSS值，会被解析器判定为非法。

2. Ionic组件的默认值回退机制
   查看Ionic 7.8的ion-button源码可知，组件内部为--border-width预设了默认值3px。当外部传入的变量值非法时，Stencil会忽略该自定义值，组件自动回退到内部预设的默认样式，这就是始终显示3px边框宽度的核心原因。

3. 其他变量正常工作的原因
   你设置的--border-radius、--color等变量值格式均符合CSS规范（如var(--button-radius)是合法的变量引用，#00272E是合法的颜色值），因此能正常穿透Shadow DOM，被组件内部的样式逻辑正确读取应用。

验证结论 #

将样式中的1 px改为1px、2 px改为2px（去掉数值与单位间的空格），--border-width即可正常生效，这也验证了上述解析的正确性。

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