element-ui--样式修改

时间:2024-04-16 14:52:46
1.在需要更改组件样式的顶层容器的样式前,加上 /deep/
更改组件样式和写自定义样式互不影响。
 
2.如果要组件内全局修改
首先在浏览器里F12找到element默认的UI类名
找到要修改的默认类名以后在文件中修改代码,重写属性,增加/deep/
<style>
 /deep/ .el-form-item__label{
    //你要修改的CSS属性
}
</style>
 
3.如果已经在全局内修改了默认样式,但又想在某一个标签内再次重写样式,则可以给要修改的标签加一个父类,在父类里重写样式,这样可以避免代码污染,也可以叫做局部修改
<el-form-item class="demo">
    <el-input v-model="name"></el-input>
</el-form-item>
<style>
.demo {
    .el-input__label{
    //重新定义的CSS属性    
    }    
}
</style>