vue中style设置scoped后部分样式不生效的解决
作者：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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。