Element UI樣式無法修改解決方法。

　　最近在做的項目中要用到Element UI組件來寫，非常方便，但畢竟Element UI是有它自己的默認樣式的，並不是客戶所要求的，但就在我想要修改樣式時遇到了棘手的問題。

　　如何引入和使用 Element 這里就不多介紹了，官方文檔和百度有很多，這里主要就是寫一下題目中提到的樣式無法修改的問題。

　　Element官方文檔中給出最簡單的分頁組件：

<div class="block">
  <span class="demonstration">大於 7 頁時的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>

　　當然這是 Element 的默認樣式，當修改它的樣式時，比如每一個數字之間的間距和邊框，都沒有成功，在調試器里也找不到對應的修改。

 

　　如何解決？

<style lang="scss" scoped>
    @import "../../../../styles/home/proMessage.scss";
</style>

　　引入樣式時使用的是上面這段代碼，我們只需要把 scoped 屬性刪除掉，或者如果 scoped 涉及到其他樣式那么就再寫一個 style 標簽，在新的 style 標簽里去修改 Element 組件的樣式。 

<style lang="scss">
    .el-pagination {
            color: #333333;
        }    
</style>
<style lang="scss" scoped>
    @import "../../../../styles/home/proMessage.scss";
</style>