vue中css样式覆盖问题 vue中css样式作用域 vue.js样式不起作用

问题背景:

项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译
后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<style scoped>里面
的scoped去掉即可,由于达到效果了就没仔细研究scoped的作用,入坑...
本地测试没有问题后,便直接上线了,but上线后发现其它页面的表格样式全部被覆盖,显示不正常。。。


解决思路

F12发现这些出问题的页面均加载出了同class名的其它页面(去掉scoped的html页面)的样式,经过查资料,发现了问题
所在:在vue.js中,<style scoped>的作用域在本html页面,<style>样式的作用域则是全局(即所有html页面),由
于我把其中一个html页面的<style scoped>中的scoped去掉,这个页面的样式就变成了全局样式,当其它页面和这些全
局样式重class名时,样式会被覆盖(vue默认全局样式覆盖局部样式),这样就导致上述情况的发生。


后续

如何在<style scoped>局部样式中覆盖全局样式:
    
  • 父组件cssName+ /deep/+第三方库需要更改的cssName
    例如 .parentCssName  /deep/  .libCssName{}

参考链接
链接描述

链接描述

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值