微信小程序中vant-dialog自定义样式

微信小程序中vant-dialog自定义样式, 包括按钮排列, 按钮的颜色. 代码.

//在wxml中
<van-dialog id="van-dialog" custom-class="custom-dialog" />

然后

//在wxss中
/* Dialog 按钮容器 */
.custom-dialog .van-dialog__footer {
  flex-direction: column !important;
  padding: 0 24px 24px !important;
  display: flex !important;
}

/* Dialog 按钮样式 */
.custom-dialog .van-dialog__button:first-child .van-button {
  background-color: white !important;
  color: #EB618C !important;
  border: 1px solid #EB618C !important;
  border-radius: 999px !important;
  height: 44px !important;
  margin: 4px 0 !important;
}

.custom-dialog .van-dialog__button:last-child .van-button {
  background-color: #EB618C !important;
  color: white !important;
  border: none !important;
  border-radius: 999px !important;
  height: 44px !important;
  margin: 4px 0 !important;
}

/* Dialog 确认按钮 */
.custom-dialog .van-dialog__confirm .van-button {
  background-color: #EB618C !important;
  color: white !important;
  border: none !important;
  border-radius: 999px !important;
}

/* Dialog 取消按钮 */
.custom-dialog .van-dialog__cancel .van-button {
  background-color: white !important;
  color: #666666 !important;
  border: 1px solid #666666 !important;
  border-radius: 999px !important;
}

/* 覆盖 van-button 的默认样式 */
.custom-dialog .van-dialog .van-button {
  border-radius: 999px !important;
}

.custom-dialog .van-dialog .van-button::after {
  border: none !important;
}

最后实现的效果图