以前寫過一篇，不是很簡(jiǎn)單，趁著有時(shí)間又簡(jiǎn)化了一下

在公共style中添加樣式即可：(在main.js/main.ts中import的公共樣式表中添加)

.ant-btn {
  &.orange {
    &, &:active, &.active {
      color: #fff!important;
      background-color: #ff9900!important;
      border-color: #ff9900!important;
    }
    &:hover, &:focus {
      background-color: #ffad33!important;
      border-color: #ffad33!important;
    }
    &[disabled] {
      .color-disabled
    }
  }
  &.green {
    &, &:active, &.active {
      color: #fff!important;
      background-color: #19be6b!important;
      border-color: #19be6b!important;
    }
    &:hover, &:focus {
      background-color: #47cb89!important;
      border-color: #47cb89!important;
    }
    &[disabled] {
      .color-disabled
    }
  }
  &.light-blue {
    &, &:active, &.active {
      color: #fff;
      background-color: #2db7f5;
      border-color: #2db7f5;
    }
    &:hover, &:focus {
      background-color: #57c5f7;
      border-color: #57c5f7;
    }
    &[disabled] {
      .color-disabled
    }
  }
  &.red {
    &, &:active, &.active {
      color: #fff;
      background-color: #ed4014;
      border-color: #ed4014;
    }
    &:hover, &:focus {
      background-color: #f16643;
      border-color: #f16643;
    }
    &[disabled] {
      .color-disabled
    }
  }
}

然后在使用時(shí)

<a-button class="orange">橘色</a-button>

這樣，想要什么顏色在樣式中定義就可以了，使用時(shí)直接class="樣式名"

上一次發(fā)布了一個(gè)自定義的，當(dāng)時(shí)沒想那么多，有點(diǎn)麻煩，這個(gè)顯然自定義起來更方便，使用時(shí)也更方便。希望對(duì)大家有所幫助.