Antd改变Modal弹窗header颜色并且随主题颜色在线改变

1.改变Modal弹窗颜色

在Antd中，Modal弹窗默认颜色为白色，我们为Modal外层添加一层div，即可如下修改弹窗头部属性：

<style lang="less" scoped>
   /deep/ .ant-modal-header{
    background-color: #40a9ff;
  }
   /deep/ .ant-modal-title{
    color: white;
  }
</style>

2.颜色随主题改变

我们有时候需要颜色随着主题的改变而动态变化

在官方文档中，给出如下解释：

Antd的配置项被保存到LocalStorage中，我们主要获取LocalStorage中的颜色信息DEFAULT_COLOR

 this.myColor = window.localStorage.getItem('DEFAULT_COLOR')

这样我们就得到了当前主题的颜色，将此颜色赋值给Modal颜色属性即可。

细节问题

1. 在第一次获取Modal头部类（.ant-modal-header）时，发现节点的值为null，第二次获取才成功，我进行了异步操作解决这个问题：

let newPromise = new Promise((resolve) => {
          resolve()
        })
        newPromise.then(() => {
          let color = document.querySelector('.ant-modal-header')
          console.log(color)
        })
      },

2. 将主题颜色赋值给Modal头部类

 		  this.myColor = window.localStorage.getItem('DEFAULT_COLOR')
          color.style.backgroundColor=this.myColor

但此时赋值是无效的，因为此时获取的myColor是一个字符串，例如"#ffcc00",如果直接赋值，那么""也包含了进去，所以对得到的字符串进行截取：

          this.myColor = this.myColor.substring(1,8)
          color.style.backgroundColor=this.myColor

这样，color.style.backgroundColor就可以识别颜色了。

至此实现了在Antd中Modal弹窗的header颜色随主题颜色在线改变的需求，如果有更好的办法，欢迎大家交流…