修改element-ui默认属性
补充:使用/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
修改element-ui默认属性的更多相关文章
- 修改element ui 默认样式最好的解释
KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的 ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- 修改storm ui 默认端口
vim conf/storm.yaml 在下面添加 ui.port: 8080
- element ui 修改默认样式
修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- 覆盖element ui 的样式
我们可以使用 !important 来覆盖element ui 的样式 首先先在浏览器中找到 我们所要修改的样式 ,然后找到她的 class 重新写他的样式 ,例如 . app { width ...
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
随机推荐
- nyoj 54-小明的存钱计划 (遍历 + 判断)
54-小明的存钱计划 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:5 submit:11 题目描述: 小明的零花钱一直都是自己管理.每个月的月初妈 ...
- JavaWeb核心知识点
一:HTTP协议 一.概述 1. 概念:超文本传输协议 2. 作用:规范了客户端(浏览器)和服务器的数据交互格式 3. 特点 1. 简单快速:客户端向服务器请求服务时,仅通过键值对来传输请求方 ...
- Linux菜鸟——常见命令一 权限
Linux对文件和目录的权限位 权限位是十位 第一位 代表文件类型 - 普通文件 d 目录文件 l 链接文件 后面九尾 所有者权限 u = user 所属组权限 g = group 其他人权限 o = ...
- beego框架学习--beego orm映射
什么是ORM 即Object-Relationl Mapping,它的作用是在关系型数据库和对象之间作一个映射,这样,我们在具体的操作数据库的时候,就不需要再去和复杂的SQL语句打交道,只要像平时操作 ...
- python3 之 匿名函数
一.语法: lambda 参数:方法(或三元运算) #最多支持3元运算 二.实例1:基础 #函数1: a = lambda x:x*x print(a(2)) #函数2: def myfun(x): ...
- 小白学习python第一天,Pycharm破解与用法(持续更新)
目录 Pycharm安装与破解及汉化 Pycharm安装 Pycharm破解 Pycharm汉化 Pycharm使用 添加作者.时间等信息 补充 @ Pycharm安装与破解及汉化 本人最近开始找到了 ...
- ES集群操作原理
路由 当你索引一个文档,它被存储在单独一个主分片上.Elasticsearch 是如何知道文档属于哪个分片的呢?当你创建一个新文档,它是如何知道是应该存储在分片 1 还是分片 2 上的呢? 进程不能是 ...
- JavaScript-----3.变量
1.变量的使用 变量在使用的时候分两步:1. 声明变量 2. 赋值 1.1声明变量 //声明变量 var age;//声明一个名字为age的变量 var是JS的一个关键字,用于声明变量,使用该关键字声 ...
- 从spring boot发邮件聊到开发的友好性
前些天帮一个朋友做网站,全站都是静态页面,唯一需要用到后端开发的是他需要一个留言板.传统的留言板一般都是提交后保存到数据库,然后提供一个后台的留言列表给管理人员看,我嫌麻烦,就决定留言提交到后台直接发 ...
- drf目录
drf目录 1 web接口与restful规范 2 django中的restful规范 3 CBV请求分析 4 请求模块分析 5 响应模块分析 6 异常模块 7 解析模块 8 序列化类 9 视图组件 ...