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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
ElementPlus是一款基于Vue3的UI组件库,提供了丰富的组件和响应式设计,易于使用和主题定制,在Vue3项目中集成ElementPlus,需要通过npm安装并引入组件,主题色可以通过修改样式文件进行全局设置,本文介绍Vue3集成Element-plus快速搭建页面框架,感兴趣的朋友一起看看吧2025-03-03
今天小编就为大家分享一篇vue transition 在子组件中失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了关于el-select组件设置默认值的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了如何把vuejs打包出来的文件整合到springboot里,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了前端 Vue.js 和 MVVM 详细介绍的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要给大家分享了Vue中watch监听属性新旧值相同问题解决方案,如果有遇到相同问题的朋友,可以参考阅读本文2023-08-08
这篇文章主要介绍了Vue中的计算属性,模板内的表达式,用于简单运算,但是模板中放入太多的逻辑会让模板过重且难以维护，更多具体内容一起进入下面文章学习吧,需要的朋友也可以参考一下2021-12-12
解决VUE项目使用Element-ui 下拉组件的验证失效问题
这篇文章主要介绍了解决VUE项目使用Element-ui 下拉组件的验证失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本篇文章主要介绍了vue.js组件之间传递数据的方法，组件实例的作用域是相互独立的，如何传递数据也成了组件的重要知识点之一，有兴趣的可以了解一下2017-07-07
这篇文章主要为大家介绍了Vue技巧Element Table二次封装实战示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论