mint-ui Message-box 自定義樣式

需求：mint-ui中的messagebox 的樣式滿足不了自己的需求，需要自己根據文檔設置自定義樣式，

代碼如下：

<mt-cell title="解綁" is-link @click.native="unbind">
  <img slot="icon" src="/static/images/unbind.png" width="24" height="24">
</mt-cell>

js部分：

unbind: function () {
        const htmls = `
           <div class="box">
             <div class="isunbind">是否解綁孩子？</div>
          </div>
        `;
        MessageBox.confirm('', {
          message: htmls,
          title: '',
          showConfirmButton:true,
          showCancelButton:true,
          cancelButtonClass:'cancelButton',
          confirmButtonClass:'confirmButton',
          confirmButtonText:'確定',
          cancelButtonText:'暫不'
        }).then(action => {
          if (action == 'confirm') {
            console.log('abc');
          }
        }).catch(err => {
          if (err == 'cancel') {
            console.log('123');
          }
        });
      }

由於樣式是自定義的，也就是

cancelButtonClass:’cancelButton’,
confirmButtonClass:’confirmButton’,
這兩行代碼，部分css如下：

<style>
  .cancelButton{
    background: #959595 !important;
    width: 1.6rem !important;
    height: .6rem;
    color: #fff !important;
    border-radius: .05rem;
    border: none;
    margin: .2rem !important;
  }
  .confirmButton{
    background: #d9534f !important;
    width: 1.6rem !important;
    height: .6rem;
    color: #fff !important;
    border-radius: .05rem;
    border: none;
    margin: .2rem !important;
  }
</style>

最終結果如圖所示：