补充:使用/deep/
防止修改默认属性影响全局样式
(1)在需要更改的组件里新增一个style标签【重点:不要加scoped】,然后直接获取class设置样式
(2)/deep/; .resourceDig为我们要修改组件类名的父级组件样式类名。
修改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>
参考博客:https://blog.csdn.net/weixin_41041379/article/details/81706743