修改样式无效的原因

当给style标签添加了scoped属性后，经过编译后，会在element组件的最外层元素上加一个唯一的样式标识属性 类似 data-v-469af010 ，注意：仅仅是最外层元素。

如下，模板中使用了对话框组件，并且style标签添加了scoped属性：

<style scoped>
.el-dialog__body {
  background-color: aquamarine;
}
</style>

虽然给对话框的body加了背景色，但是却没生效：

可以看到，对话框组件只有最外层的 class=el-dialog__wrapper 的div标签加上了样式标识属性，class=el-dialog__body的div标签上并没有，那为什么我们添加的样式没生效呢？继续看，我们编写的样式代码最终被编译成了什么样子，从控制台的source中可以看到：

最终的打包代码也是如此：

注意

问题找到了，由于scoped的存在，我们的样式代码最终都被添加了一个样式标识属性，但是实际生成的html标签中没有这个标识。。。所以样式一定是不会生效的。

解决办法

1. 深度选择器

可以使用 ::v-deep 解决：

<style scoped>
::v-deep .el-dialog__body {
  background-color: aquamarine;
}
</style>

效果如下：

2. 去除scoped

如果想只修改这个组件的样式而不污染全局，可以给最外层元素添加一个class，然后将element的class作为子集去写，也可以解决上述问题。