Как настроить высоту и ширину ионного флажка?

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;
  }
}

Я пытался изменить высоту и ширину ионного флажка, но, похоже, ничего не работает. Я даже попробовал

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

Я пытался использовать --size:, но он не достиг того, что мне нужно. Мне нужно было бы конкретно изменить размер SVG, но даже делать

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

вложенный под ion-checkbox не работает. Есть ли способ обойти это?

Answer 1

Когда вы видите в консоли разработчика, вы видите, что CSS эффективен?Это очень возможно, другой определенный стиль в вашем проекте имеет приоритет.Попробуйте использовать принудительное переопределение стиля, используя тег !important, это должно решить вашу проблему.

Нет ничего плохого в том, как вы устанавливаете стиль для ion-checkbox.