Стиль-флажок

Question

У меня был стиль ниже для ion-checkbox, который я использовал в ionic 3. Я хочу использовать тот же стиль в ionic 4:

 .ion-checkbox .ion-checkbox-icon {
 border-radius: 2px;
 position: relative;
 width: 50px;
 height: 50px;
 border-color: #dedede;
 background-color: #ffffff;
 }

 .ion-checkbox .ion-checkbox-checked .ion-checkbox-inner {
 left: 16px;
 top: 5px;
 position: absolute;
 width: 14px;
 height: 27px;
 border-color: #427feb;
 border-top-width: 0;
 border-right-width: 4px;
 border-bottom-width: 4px;
 border-left-width: 0;
 }

 .ion-checkbox-md .ion-checkbox-checked {
 border-color: #fafafb;
 background-color: #f9f9f9;
}

Стиль не работает в ионном 4. Чего мне не хватает?

Answer 1

Мне пришлось ссылаться на ion-checkbox как на элемент, а не на класс.

Вот что сработало для меня;

ion-checkbox {
  background: #ffffff;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 4px;
  border-color: grey !important;
  --height: 35px;
  --width: 35px;
  --checkmark-color: #4870f2;
  --background-checked: #ffffff;
  --border-color: #ffffff;
  --border-color-checked: #ffffff;
}

Более подробную информацию о пользовательских свойствах можно найти здесь из официальной документации.

Answer 2

Попробуйте переустановить последнюю ионную.У меня это сработало.

npm i -g ionic@latest