$message修改样式无效问题解决方法

今天写代码时遇到了一个问题，前提是项目做了移动端适配，会根据屏幕大小改变字体的大小，所以导致在pc端展示时$message的图标被放大

解决方法：

方法一：

        this.$message({
          type: "warning",
          message: "标签已存在",
        });
        var el=document.querySelectorAll('.el-message__icon');
        if(el){
          el.forEach(item=>{
            item.style.cssText = 'font-size:0.5rem'
          })
        } 

注意是使用querySelectorAll而不是querySelector，querySelector只会获取第一个

方法二：看了一些帖子说elementui组件不可以给样式添加scoped，所以要想修改其样式就要去掉scoped，试了一下方法可行

<style lang="less" >
.el-message-box{
  width: 70% ;
}
.el-message__icon{
  font-size:0.5rem
}
</style>