Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题。
如何引入和使用 Element 这里就不多介绍了,官方文档和百度有很多,这里主要就是写一下题目中提到的样式无法修改的问题。
Element官方文档中给出最简单的分页组件:
<div class="block">
<span class="demonstration">大于 页时的效果</span>
<el-pagination
layout="prev, pager, next"
:total="">
</el-pagination>
</div>

当然这是 Element 的默认样式,当修改它的样式时,比如每一个数字之间的间距和边框,都没有成功,在调试器里也找不到对应的修改。
如何解决?
<style lang="scss" scoped>
@import "../../../../styles/home/proMessage.scss";
</style>
引入样式时使用的是上面这段代码,我们只需要把 scoped 属性删除掉,或者如果 scoped 涉及到其他样式那么就再写一个 style 标签,在新的 style 标签里去修改 Element 组件的样式。
<style lang="scss">
.el-pagination {
color: #333333;
}
</style>
<style lang="scss" scoped>
@import "../../../../styles/home/proMessage.scss";
</style>
Element UI样式无法修改解决方法。的更多相关文章
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- "字体arial不支持样式regular"的解决方法
软件报错,提示“字体arial不支持样式regular”的提示,这是由于字体arial缺失导致的, “字体arial不支持样式regular”的解决方法如下: 方法/步骤 1.用户需要先下载arial ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- hover样式失效的解决方法
提到 css 的hover 选择器,想必大家都不陌生(:hover 用于设置鼠标指向某元素上后显示的样式) 除了常用的 hover 选择器,还有3个可以和它搭配使用的选择器: :link 设置 ...
- CSS中的各个选择节点,都有样式最后一个无样式的快捷解决方法
2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- 样式表中的 element.style样式如何修改
我们在写前面 web样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的 ...
- innodb_data_file_path参数误修改解决方法
如果innodb_data_file_path参数被修改乱了,不知道原来值的大小,这样启动是会报错的.知道原来大小方法: 方法一:操作系统下ls -l看到原来大小,直接用ls -l显示的大小,复制即可 ...
随机推荐
- 传值与传引用(C++)
reference(引用) 是C++对C的一个扩充 int a; int &b = a;//声明b是一个整形的引用变量 C语言,函数的参数传递有2种形式:传值方式调用和传引用方式调用 传值方式 ...
- YII1 增、删、改、查数据库操作
增 //注意插入的时候 是用的new Post $objectPost = new Post; $objectPost->username = $username; $objectPost-&g ...
- mysql 主键外键
外键MUL:一个特殊的索引,用于关键2个表,只能是指定内容 主键PRI:唯一的一个不重复的字段. # 创建一个表用来引用外键 create table class( -> id int no ...
- linux的必知必会规则
- JavaScript test() 方法
JavaScript test() 方法 JavaScript RegExp 对象 定义和用法 test() 方法用于检测一个字符串是否匹配某个模式. 语法 RegExpObject.test(str ...
- IDEA spirng boot @Autowired注解 mapper出现红色下划线解决方法
如图所示,解决方法为: 把勾去掉即可.
- WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! --主机密钥验证失败
1.错误出现在更换服务器操作系统后,使用ssh指令连接服务器时报错:ECDSA主机密钥发生改变,导致主机密钥验证失败! 2.解决方式一 使用指令:$ ssh-keygen -R 主机IP 如:$ s ...
- Python自学:第二章 动手试一试
print(1 + 7) print(16 - 8) print(2 * 4) print(8 / 1) 输出为: 8 8 8 8.0 message = " print("I l ...
- 关于antd 日期组件只选择年份,设置mode=year无法获取value的解决办法
antd3.0后的某个版本后终于支持了只选择年份的设置.当时2.x版本的时候还不支持只选择年份,我们项目中有这个只选择年份的需求,为了ui风格的一致,只好自己撸了一个. 如今真是普天同庆!
- 如何分析java内存泄漏问题
java中的内存泄漏首先需要dump文件出来,主要包括内存dump.线程dump: 内存dump是指通过jmap -dump <pid>输出的文件,而线程dump是指通过jstack &l ...