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

本文轉載於:猿2048網站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>