html - ionic 元素的右下边框

Question

我有一个 ion-item 描述为:

  <ion-row>
  <ion-item class = "Checkbox">
<ion-label>Remember my choice</ion-label>
<ion-checkbox [(ngModel)]="remember"></ion-checkbox>
  </ion-item>
  </ion-row>

其中 Checkbox 类被描述为:

.Checkbox {
   color: white;
   background:#c34545;
}

问题是这给我的 ion-item 一个奇怪的右下角边框，你可以检查一下:

我发现按钮类的边框属性为:

button {
border: 0;
border-top-color: initial;
border-top-style: initial;
border-top-width: 0px;
border-right-color: initial;
border-right-style: initial;
border-right-width: 0px;
border-bottom-color: initial;
border-bottom-style: initial;
border-bottom-width: 0px;
border-left-color: initial;
border-left-style: initial;
border-left-width: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;

但是禁用它给我这个:

这真的让我抓狂。 scss 文件中唯一可能存在的冲突是我定义的 ion-row:

ion-row {
   align-items: center;
   text-align: center;
}

Answer 1

去除底线的最佳方法是将no-lines 属性添加到ion-item。无需添加任何 css 样式。