vue中style设置scoped后部分样式不生效的解决
更新时间：2024年09月03日 09:50:13 作者：LXXgalaxy
这篇文章主要介绍了vue中style设置scoped后部分样式不生效的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中style设置scoped后部分样式不生效
因为用了elementUI的组件库，一个页面用到了el-dialog，需要改一下样式，但<style>中设置了scoped后样式并不生效。
因为vue的scoped为本组件的所有标签都打上了一个唯一attribute，样式生效时也带上了这唯一的attribute，但是本组件应用的所有子组件，除根标签以为其他都未打上这唯一标签，因此样式自然不会生效。
vue 自动添加一个唯一的 attribute
添加了唯一的attribute，这也就是vue scoped 实现样式隔离的原理。
如果不怕影响别的页面的话把scoped删掉之后样式即可生效。
不删除scoped的解决办法
查了一下官方解决办法
vue官方给出的解决办法是： 深度作用选择器
<style scoped>
::v-deep .el-dialog {
background-color: #0c1d3f;
}
</style>还可以用/deep/、 >>>、::v-deep。
/deep/在vue 3.0会报错，可使用::v-deep
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了OpenDataV低代码平台新增组件流程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了详解实现vue的数据响应式原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最近在做项目的时候遇到个需求,需要修改el-table背景色,这里给大家总结下,这篇文章主要给大家介绍了关于elementui el-table底层背景色修改的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了详解如何用VUE写一个多用模态框组件模版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Vue使用provide各种传值后inject获取undefined的问题及解决
这篇文章主要介绍了Vue使用provide各种传值后inject获取undefined的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
el-form-item中表单项label和表单项内容换行实现方法
这篇文章主要给大家介绍了el-form-item中表单项label和表单项内容换行实现的相关资料,每个表单el-form由多个表单域el-form-item组成,需要的朋友可以参考下2023-09-09
Vue引入路径正确但一直报错问题:Already included file name&n
这篇文章主要介绍了Vue引入路径正确但一直报错:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了el-table实现转置表格的示例代码(行列互换),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
详解vue-template-admin三级路由无法缓存的解决方案
这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论