vue element ui 样式修改无效

最近在使用vue 搭配element ui进行开发的时候，遇到el-dialog 样式修改无效的问题。搁置了我好长时间。

Solution One

• 将样式写在全局中，如App.js

<style scoped>
/* 本地样式 */
.aritle-page{ //你的命名空间
    .el-tag { //element-ui 元素
      margin-right: 0px;
    }
}
</style>
           

Solution Two

• 使用深度作用选择器

  如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { 
	/* ... */ 
}
</style>
           

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

#table-role /deep/ .el-table__empty-block{
  height: 570px;
  overflow: auto;
}
           

Actually

实际上，项目的那个bug，我就是直接在前头加一个/deep/,就解决了

/deep/ .el-dialog{
  height: 570px;
  overflow: auto;
}