el-message样式修改无效怎么搞?

img


<style lang="scss" scoped>
/*alert 成功弹出框样式*/
.el-message {
  border: 1px dashed blue;
  min-width: 1380px;
}
</style>

加了scoped后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染,但是this.$message生成的dom是没有添加data-v-xxx属性的,所以样式无效。

可以用js动态设置,但是还需要修改内部元素的样式操作起来就比较麻烦了


        this.$message({
          message:'登录失败',
          center:true,
          type:'error',
          duration:0
        });
        var el=document.querySelector('.el-message');
        if(el)el.style.cssText='  border: 1px dashed blue;  min-width: 1380px;'

<style>
/*alert 成功弹出框样式*/
.el-message {
  border: 1px dashed blue;
  min-width: 1380px;
}
</style>


这样

把 scoped去了

<style lang="scss">
/*alert 成功弹出框样式*/
.el-message {
  border: 1px dashed blue;
  min-width: 1380px;
}
</style>

深度选择器deep或者增加一个样式覆盖掉