造型离子复选框答案

【问题标题】：Styling ion-checkbox造型离子复选框
【发布时间】：2018-12-06 04:02:20
【问题描述】：

我在 ionic 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 中不起作用。我错过了什么？

【问题讨论】：

标签： ionic-framework sass css-selectors

【解决方案1】：

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

npm i -g ionic@latest

【讨论】：

【解决方案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。

【讨论】：