修改element-ui默认属性

修改element ui默认的样式

如果要组件内全局修改

首先在浏览器里F12找到element默认的UI类名



找到要修改的默认类名以后

在文件中修改代码,重写属性

<style>
.el-form-item__label{
    //你要修改的CSS属性
}
</style>
但是如果已经在全局内修改了默认样式,但又想在某一个标签内再次重写样式,则可以给要修改的标签加一个父类,在父类里重写样式,这样可以避免代码污染,也可以叫做局部修改

<el-form-item class="demo">
    <el-input v-model="name"></el-input>
        </el-form-item>
<style>
.demo {
    .el-form-item__label{
    //重新定义的CSS属性    
    }    
}
如果不可以,则改成:
.demo .el-form-item__label{
    //重新定义的CSS属性    
    }    
</style>

例子:修改走马灯默认容器高度,以及左右按钮位置

注意:style标签内不要加scoped不然样式会失效

<style >
  .el-carousel__container {
    height: 600px !important;
  }
  .el-carousel__arrow--left {
    left: -35px !important;
    top: 55% !important;
  }
  .el-carousel__arrow--right {
    right: 0px !important;
    top: 55% !important;
  }
</style>
上一篇:通配符与标签!important的背景展示,也是让我怀疑人生了


下一篇:Vue中修改Element UI组件库中的选择器背景色不生效的解决方法