Angular Material按钮禁用样式更改

Question

form.html

<md-button class="md-raised md-primary pull-right formPage" ng-disabled="formPage.$invalid" ng-click ="submit()">SAVE</md-button>

CSS

.md-button.md-raised.md-primary.formPage {
    position: right !important;
    color: #FFFFFF;
    background-color:#008cba;    
}

按钮被禁用，但它具有来自我的CSS的自定义颜色。我该如何显示默认的禁用样式或者如果按钮被禁用的话更改按钮颜色？ Jsfiddle

- Mad-D

Answer 1

样式表应该是这样的：

.md-button.md-raised.md-primary.formPage:not([disabled])

请参考 http://jsfiddle.net/apxbutmf/。

- sdfacre

---

我考虑了这个逻辑，但是不知道如何在未禁用时添加颜色。非常感谢您的帮助。 - Mad-D

Answer 2

以下是我使用的覆盖后续css类（Angular-Material v12按钮mat-stroked）：

.mat-stroked-button.mat-button-disabled.mat-button-disabled {    

color: #FFFFFF;
background-color: #008cba

}

- Y.kh

Answer 3

当按钮被禁用时，会为您的按钮添加一个名为“disabled”的新类。检查它并按照以下方式更新您的CSS样式。

.md-button.md-raised.md-primary.formPage:not(.disabledclassname) {
    position: right !important;
    color: #FFFFFF;
    background-color:#008cba;    
}

- Dennis Parsons

---

那个不起作用。我已经在问题中更新了Fiddle。 - Mad-D