如何在ionic 3中为特定按钮覆盖特定页面的Scss

Question

我无法覆盖页面上特定按钮的scss。

https://stackblitz.com/edit/ionic-esc8ua?file=pages%2Fhome%2Fhome.html

   button {
       &.optgroup {
          &.input-wrapper {
            padding-left:10px !important;
          }
       }
     }

<button ion-item class="optgroup">Hello i want to apply css to this button</button>

   <button ion-item>i dont want to modify this button</button>

我想将padding-left：10px应用于第一个按钮的文本内部

已解决：

.optgroup {
        & > div.item-inner {
          padding-left:6px !important;
        }
}

Answer 1

考虑在主目录下创建一个scss文件，并从主组件中引用它，如下所示：

home.ts

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  styleUrls: [ 'home.scss' ]
})

和 home.scss ：

.optgroup ::content {
  padding-left:100px;
}