修改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 56-阶乘因式分解(一)(数学)
56-阶乘因式分解(一) 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:15 submit:16 题目描述: 给定两个数m,n,其中m是一个素数. ...
- nyoj 65-另一种阶乘问题 (Java 高精度)
65-另一种阶乘问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:16 提交数:18 难度:1 题目描述: 大家都知道阶乘这个概念,举个简单的例子:5!=1*2*3*4*5.现在 ...
- drf组件之jwt认证
drf组件之jwt认证模块 一.认证规则 全称:json web token 解释:加密字符串的原始数据是json,后台产生,通过web传输给前台存储 格式:三段式 - 头.载荷.签名 - 头和载荷才 ...
- vue 安装指令
vue init webpack 项目名 创建项目cd 项目名 打开项目 npm install vuex --save 安装vuex在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来 ...
- Excel 如何做不定长区间汇总统计
第一步:创建数据-区间 辅助表(注意:首列值必须以升序排列,为后面vlookup模糊匹配做准备) 第二步:用vlookup模糊匹配生成一个新的“金额区间”字段 第三步:以“金额区间”字段为行透视汇总
- python变量、输入输出-xdd
1.注释 #输入身高,计算BMI 注释1,单行注释... 注释2,多行注释xiedong.. 2.中文编码声明,UTF-8编码声明 # coding=编码 # coding=utf-8 3.建议每行不 ...
- 【Android - IPC】之Binder机制简介
参考资料: 1.<Android开发艺术探索>第二章2.3.3 Binder 2.[Android Binder设计与实现-设计篇] 3.[Android Binder机制介绍] 1. 什 ...
- 【Android - 控件】之MD - CardView的使用
CardView是Android 5.0新特性——Material Design中的一个布局控件,可以通过属性设置显示一个圆角的类似卡片的视图. 1.CardView的属性: app:cardCorn ...
- react之context
context是什么 Props属性是由上到下单向传递的 context提供了在组件中共享此类值的方法 context使用 设计目的是共享哪些对于组件来说全局的数据 不要因为仅仅为了避免在几个层级下的 ...
- PAT(甲级)2019年春季考试
7-1 Sexy Primes 判断素数 一个点没过17/20分 错因:输出i-6写成了输出i,当时写的很乱,可以参考其他人的写法 #include<bits/stdc++.h> usin ...