某些样式不适用于 Ionic 离子按钮

Question

问题的超级简单示例：

离子7.8。

<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;             // Make sure button doesn't take full width by default
  align-items: center;
  justify-content: center;
  text-transform: none !important;  // Disable uppercase globally for ion-buttons (need to force it!)
  padding: 0;                       // Ionic adds 5px padding top & bottom
  margin: 0;                        // remove outer margin (beyond the border-box)
  box-sizing: border-box !important;
  --box-shadow: 0;                  // Wanda no likey the shadows!

  // All except for links use this font
  @extend .text-button-label;            // from typography global styles

  &.monkey-theme-secondary {
    --color: var(--text-lines, #00272E);
    --background: transparent;
    --border-style: solid;
    --border-color: var(--text-lines, #00272E);
    --border-width: 2 px;
  }

  ... 

为了快速测试，我使用 Storybook。问题就在这里。边框宽度始终为 3 px。其他一切都很好。其他 CSS 变量似乎表现良好 - 它只是边框宽度。

我并不追求一种古怪的解决方法。我真正想要的是理解为什么会出现这种情况。也许可以更好地理解模板的工作原理...

这是故事书与预期结果的比较视图。高于实际。低于预期。

Answer 1

在CSS中，数字和单位不能用空格分隔。 CSS 使用空格作为分隔符，因此浏览器认为它们是单独的值。

所以这是无效的语法并且不会执行任何操作：

border-width: 2 px;

删除空格，它应该可以工作：

border-width: 2px;

在正常的 CSS 声明（不是自定义属性）中，浏览器开发工具会通过显示该值无效来帮助您。但是对于自定义属性，浏览器不知道自定义属性应该是什么类型（即它可能是值列表）。