如何调整ion-checkbox的高度和宽度？

Question

我有一个使用ion-checkbox构建的checkbox组件：

selector: 'app-checkbox',
  template: `
      <div class="app-checkbox">
          <ion-item class="-DARKMODE"
                    lines="none">
              <ion-checkbox [checked]="checked"
                            (ionChange)="onCheckChanged($event)"></ion-checkbox>
              <span>{{label}}</span>
          </ion-item>
      </div>
  `,
  styleUrls: ['./app-checkbox.scss'],

这是scss：

.app-checkbox {

  display: flex;
  flex-direction: row;
  align-content: center;

  ion-item {
    --padding-start: 0;
  }

  ion-checkbox {
    height: 26px;
    width: 26px;
  }

  span {
    @include body-small;
    margin-left: $padding-single;
  }
}

我一直在尝试更改ion-checkbox的高度和宽度，但似乎都不起作用。我甚至试过

--width: 26px;
--height: 26px;

我试过使用--size:，但它没有达到我需要的效果。我需要专门更改SVG的大小，但即使这样做

ion-checkbox {
  svg {
    height: 26px;
    width: 26px;
  }
}

嵌套在ion-checkbox下不起作用。有什么办法可以解决这个问题吗？

Answer 1

当您在开发者控制台中看到css时，您是否看到css是有效的？这是非常有可能的，你的项目中的另一个定义的样式是优先的。尝试使用!important标记的样式强制覆盖，它应该可以解决您的问题。

您为ion-checkbox设置样式的方式没有任何问题。

Answer 2

遇到了同样的问题，无法以任何方式更改ion-checkbox上的填充或更改svg内部的高度。我最终使用透明边框作为快速解决方案。

--border-width: 6px;
--border-color: transparent;

如果你想要一个自定义的解决方案，你也可以使ion-checkbox上的所有背景都透明，并在它周围创建一个带有填充和波纹效果的自定义包装器。