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文件也会更着改动。