码迷,mamicode.com
首页 > 其他好文 > 详细

element.ui 自定义样式问题

时间:2020-06-28 15:25:07      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:css样式   put   ack   除了   border   idt   input   scss   查询   

 

方法有很多种

自定义类名

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

 

 

element.ui 自定义样式问题

标签:css样式   put   ack   除了   border   idt   input   scss   查询   

原文地址:https://www.cnblogs.com/xiaoliziaaa/p/13202644.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!