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;
}