element.ui 自定義樣式問題

 

方法有很多種

自定義類名

 <el-button class="search_button" @click="search">查詢</el-button>

 

.search_button {
    color: #ffffff;
    background: #15ac86;
    border: none;
    border-radius: 3px;

    &:hover,
    &:active,
    &:focus {
        color: #ffffff;
        background: #15ac86;
        border: none;
        border-radius: 3px;
    }
}                              

 less scss樣式穿透(也叫深度選擇器)

因為前面有.text-box  .table_detail諸如自定義類名的限制，只會在當前vue文件下含有.text-box  .table_detail下使用。很好啊

<el-input v-model="text" class="text-box"></el-input>
<style lang="less" scoped>
.text-box {
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}

//.table_detail 自定義類名

.table_detail /deep/ .el-table .cell {

  text-overflow: clip;

  color: red;

}

</style>

除了樣式穿透還可以新建一個沒有 scoped 的 style（一個.vue文件允許多個style。缺點，其他vue文件也會更着改動。