在ionic 3项目中无法更改按钮样式

Question

当我尝试使用！important或使用新的自定义类更改这些组件上的离子按钮样式时，它什么也没有改变。这是代码：

<ion-content padding>
    <ion-list>
        <button ion-button block class=" custbtnnew" (click)=" SelectImage()">
            Select
        </button>
        <br>
        <button style="margin-top:20px;" ion-button block class="custbtnnew" (click)="UploadImage()">
            Upload
        </button>
    </ion-list>
    <div *ngIf="images" class="group">
        <ion-grid>
            <ion-row>
                <ion-col col-6 col-md-4 col-lg-3 col-xl-2 class="created_group" *ngFor="let image of images">
                    <div class="container">
                        <div class="imgs">
                            <img class="imgBg"
                                src="URL">
                            <button *ngIf="images" ion-button clear (click)="SetProfileImage(image)" class="imgBtn">
                                Set As Default
                            </button>
                            <button *ngIf="images" ion-button clear (click)="Delete(image)" class="imgBtn">
                                Delete Image
                            </button>
                        </div>
                    </div>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>
</ion-content>

CSS

 .custbtnnew {
    border-radius: 40px !important;
    background: -webkit-gradient(linear, left top, right top, from(#DD2476), to(#FF512F));
    background: linear-gradient(to right, #DD2476, #FF512F);
  }

是什么原因导致这种问题的？如何解决？

Answer 1

您可能需要在.scss周围添加页面声明

page-home {
 .custbtnnew {
    border-radius: 40px !important;
    background: -webkit-gradient(linear, left top, right top, from(#DD2476), to(#FF512F));
    background: linear-gradient(to right, #DD2476, #FF512F);
  }
}