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>

最终结果如图所示：