在用vue開發項目過程中，我們總是避免不了的會使用到elementUI，它里面提供的一些組件都為我們的開發帶來了很大的便利，但是，當有時候我們需要使用這些組件的同時又要修改下組件的UI樣式的話，我們該怎么去做呢？接下來我們來看下。

　　

　　如上圖所示，elementUI的多選框是方框的，那么如果我們需要一個圓形的選擇框的話，怎么辦呢，這個時候我們第一時間想到的應該就是border-radius:50%;但是怎么往上加呢，我們接下來看一看

　　首先，我們需要選中要改變樣式的組件，然后鼠標右鍵檢查元素，找到該組件的類名，然后在style里面直接將該類名的樣式進行修改就可以了，代碼如下：

<style>
  .el-checkbox__inner {   // 對應的組件的類名
  　　border-radius: 50%;
  }
</style>

　　上面的這個方法已經可以改變組件的樣式了，但是這里存在一個問題，在style里面改變的樣式是全局的，也就是說，如果我們在其他頁面里面也用到了這個組件的話，其他頁面的樣式也會被我們改變，顯然這不是我們想要的，那么我們如何做到只改變相應的頁面里面的組件樣式呢？這時候我們就需要用到scoped這個屬性了。

　　那么scoped的作用是什么呢？scoped是Vue里面style標簽的一個特殊屬性，當一個style標簽擁有scoped屬性的時候，就相當於說明它里面的樣式只作用於當前這個Vue頁面，不會污染到全局的樣式，從而實現了組件樣式的模塊化，那么它是怎么實現的呢？其實如果我們給style標簽加上了scoped屬性，在編譯的時候，他會給我們組件里面的每一個樣式加一個自定義的屬性data-v-5558821a,從而通過給含有這個自定義屬性的標簽加上樣式，從而實現了部分樣式的穿透。所以我們只需要這樣：

<style scoped>
.edit_dev >>> .el-checkbox__inner { // 這里我們要注意，想要修改組件樣式的話，必須先用一個原生標簽將這個組件包起來，然后通過父查子的方式來找到組件的類，注意這里的>>>是不可少的，要通過這個來查找
  　border-radius: 50%;
  }
</style>

　　當然這里還有另外一個方法，就是通過less以及sass的方式來實現穿透，代碼如下：

<style scoped lang="less">
　.edit_dev {
　　/deep/ .el-checkbox__inner{  // less語法要通過/deep/ 來找到子級的類
　　　border-radius: 50%;
　　}
　}
</style>

　　以上三種方法都是可以實現改變element組件樣式的，大家可以根據自己的實際情況來進行選取。