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