样式化离子复选框

Question

我在离子3中使用了下面的ion-checkbox样式。我想在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;
}

该样式在ionic 4中不起作用。我想念什么？

Answer 1

尝试重新安装最新的离子。它对我有用。

npm i -g ionic@latest

Answer 2

我不得不引用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;
}

有关自定义属性的更多详细信息，请参见官方文档here。