最近在做的项目中要用到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样式无法修改解决方法。的更多相关文章

  1. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  2. "字体arial不支持样式regular"的解决方法

    软件报错,提示“字体arial不支持样式regular”的提示,这是由于字体arial缺失导致的, “字体arial不支持样式regular”的解决方法如下: 方法/步骤 1.用户需要先下载arial ...

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

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

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

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

  5. hover样式失效的解决方法

       提到 css 的hover 选择器,想必大家都不陌生(:hover 用于设置鼠标指向某元素上后显示的样式)  除了常用的 hover 选择器,还有3个可以和它搭配使用的选择器: :link 设置 ...

  6. CSS中的各个选择节点,都有样式最后一个无样式的快捷解决方法

    2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...

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

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

  8. 样式表中的 element.style样式如何修改

    我们在写前面 web样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的 ...

  9. innodb_data_file_path参数误修改解决方法

    如果innodb_data_file_path参数被修改乱了,不知道原来值的大小,这样启动是会报错的.知道原来大小方法: 方法一:操作系统下ls -l看到原来大小,直接用ls -l显示的大小,复制即可 ...

随机推荐

  1. GoldenGate实时投递数据到大数据平台(7)– Apache Hbase

    Apache Hbase安装及运行 安装hbase1.4,确保在这之前hadoop是正常运行的.设置相应的环境变量, export HADOOP_HOME=/u01/hadoop export HBA ...

  2. codeforces #305 E Mike and friends

    原问题可以转化为:给定第k个字符串,求它在L-R的字符串里作为子串出现了多少次 定义子串为字符串的某个前缀的某个后缀(废话) 等价于我们把一个字符串插入到trie里,其过程中每个经过的节点和其向上的f ...

  3. oracle(2)

    create table aaa( id number, name varchar2(100) ); select decode((select max(id) from aaa),null,'x', ...

  4. Python sqlalchemy orm 多外键关联

     多外键关联 注:在两个表之间进行多外键链接 如图: 案例: # 创建两张表并添加外键主键 # 调用Column创建字段 加类型 from sqlalchemy import Integer, For ...

  5. Java访问权限修饰符public protected friendly private用法总结(转载好文Mark)

    首先声明:Java中,friendly这个修饰符并没有显式的声明,在成员变量和方法前什么修饰符也不用,默认的就是friendly.为了条理清晰,分三种不同情况来总结. 一 访问权限修饰符修饰成员变量和 ...

  6. iOS UIAlertController在iPhone与iPad上的区别

    很简单的一段代码: // 首先声明一个UIAlertController对象 private var alertController: UIAlertController! // 初始化UIAlert ...

  7. SSM-网站后台管理系统制作(2)---SSM基本工作原理

    SSM基本工作原理 讲解网站:https://www.w3cschool.cn/wkspring/dcu91icn.html 构建基本工作环境: mysql eclipse(tomcat8.0) Hb ...

  8. JS设计模式(4)迭代器模式

    什么是迭代器模式? 定义:提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示. 主要解决:不同的方式来遍历整个整合对象. 何时使用:遍历一个聚合对象. 如何解决:把在元素之间游 ...

  9. 2019年1月6日 没有nainai吃 习题1

    1列举布尔值是False的所有值 0,False,'',[],{},(),None 2根据范围获取其中3和7整除的所有数的和,并返回调用者:符合条件的数字个数以及符合条件的数字的总和 def func ...

  10. SIP协议简单介绍

    sip协议是由IETF提出的IP电话信令协议,主要目的是为了解决ip网络中的信令控制,以及同软交换通信. sip协议类似http协议: 报文结构: start-line message-header ...