补充:使用/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默认属性的更多相关文章

  1. 修改element ui 默认样式最好的解释

    KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style标签会在vue-loader里进行处理 所谓的 ...

  2. vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

  3. vue加scoped后无法修改样式(无法修改element UI 样式)

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  4. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  5. 修改storm ui 默认端口

    vim conf/storm.yaml 在下面添加 ui.port: 8080

  6. element ui 修改默认样式

    修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...

  7. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  8. 覆盖element ui 的样式

    我们可以使用 !important  来覆盖element ui 的样式 首先先在浏览器中找到 我们所要修改的样式 ,然后找到她的 class  重新写他的样式 ,例如 . app  { width ...

  9. Element UI样式无法修改解决方法。

    最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...

随机推荐

  1. nyoj 206-矩形的个数 (a*b*(a+1)*(b+1)/4)

    206-矩形的个数 内存限制:64MB 时间限制:1000ms 特判: No 通过数:16 提交数:37 难度:1 题目描述: 在一个3*2的矩形中,可以找到6个1*1的矩形,4个2*1的矩形3个1* ...

  2. 利用 pyhon 解决 Cross Origin Requests

    在学习 ajax 时遇到了一个问题 XMLHttpRequest cannot load file:xxxxxxxx . Cross origin requests are only supporte ...

  3. Json模块和Pickle模块的使用

    在对数据进行序列化和反序列化是常见的数据操作,Python提供了两个模块方便开发者实现数据的序列化操作,即 json 模块和 pickle 模块.这两个模块主要区别如下: json 是一个文本序列化格 ...

  4. PostGIS 存储过程调试

    说明: 在使用Postgis做路径分析时需要用到数据库的存储过程,但是存储过程逻辑很复杂,很想看一下每步的执行结果. 百度了一下,发现postgresql有插件可以支持调试存储过程. 解决方案: 1. ...

  5. LMS自适应天线阵列设计 MATLAB

    在自适应天线课上刚刚学了LMS自适应阵,先出一个抢先版贴一下结果,抢先某个小朋友一步. 关于LMS的具体介绍,直接看wiki里的吧,解释的比书上简明:传送门:https://en.wikipedia. ...

  6. 新闻实时分析系统-Kafka分布式集群部署

    Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cloudera.Apache Storm.Spa ...

  7. Python 0基础开发游戏:打地鼠(详细教程)VS code版本

    如果你没有任何编程经验,而且想尝试一下学习编程开发,这个系列教程一定适合你,它将带你学习最基本的Python语法,并让你掌握小游戏的开发技巧.你所需要的,就是付出一些时间和耐心来尝试这些代码和操作. ...

  8. 【前端】 在前端利用数学函数知识+box-shadow解波浪图形

    序 今天正在刷数学函数相关题目,刷到了下面这篇文章,哇哦-有意思. 利用cos和sin实现复杂的曲线.传送门在下面. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画 正巧在复 ...

  9. 洛谷P1426-小鱼会有危险吗

    原题链接: https://www.luogu.org/problem/P1426 题面简述: 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%98 ...

  10. 分布式远程调用SpringCloud-Feign的两种具体操作方式(精华)

    一 前言 几大RPC框架介绍 1.支持多语言的RPC框架,google的gRPC,Apache(facebook)的Thrift 2.只支持特定语言的RPC框架,例如新浪的Motan 3.支持服务治理 ...