Question

我有一个使用ion-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;
  }
}

离子复选框下的

嵌套无效。有什么办法解决吗？

Answer 1

当您在开发人员控制台中看到时，您看到CSS有效吗？很有可能，项目中定义的其他样式优先。尝试使用带有!important标签的样式强制替代，它应该可以解决您的问题。

如何设置ion-checkbox的样式没有错。

Answer 2

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

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

如果您想使用自定义解决方案，还可以使ion-checkbox上的所有背景透明，并在其周围创建具有填充和波纹效果的自定义包装。

如何调整离子复选框的高度和宽度？

2 个答案: