最近在做的项目中要用到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. CRT/LCD/VGA Information and Timing

    彩色阴极射线管的剖面图: 1. 电子QIANG Three Electron guns (for red, green, and blue phosphor dots)2. 电子束 Electron ...

  2. Linux-Centos7 安装图形界面

    1.首先安装X(X Window System),命令为 :yum groupinstall "X Window System" 回车(注意有引号) 2.查看桌面列表 : yum ...

  3. Java爬虫模拟登录——不给我毛概二的H某大学

    你的账号访问太频繁,请一分钟之后再试! 从大一开始 就用脚本在刷课 在专业课踢的只剩下一门C#的情况下 活活刷到一周的课 大二开始教务系统多了一个非常**的操作 退课池 and 访问频繁缓冲 难道,我 ...

  4. 算法(第四版)C# 习题题解——1.2

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...

  5. JS设计模式(8)模板方法模式

    什么是模板方法模式? 定义:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 主要解决:一些方法通用,却在每一个子类都重新 ...

  6. MySQL 实战笔记

    01 | 基础架构:一条SQL查询语句是如何执行的? 大体可以分为: Server 层:包含了连接器.查询缓存.分析器.优化器.执行器,跨存储引擎的功能都在这一层实现的,比如存储过程.触发器.视图等. ...

  7. Base64 空格,加号问题

    缘由: 在一个项目中,app请求tcpdump日志与记录的日志内容不一致 请求%2B 识别成 + 请求 + 识别成 空格 这个在base64解密的时候会出现异常,base64需要的是加号,而不是空格 ...

  8. windows(xshell)免密码登录

    windows(xshell)免密码登录 第一步生成密钥文件 打开xshell 选个工具栏的工具如下图 选择密钥类型和长度,如下图 密钥会自动生成,如下图,点击下一步即可 设置给密钥加密的密码也可以不 ...

  9. 机器学习实战1-1 KNN电影分类遇到的问题

    为什么电脑排版效果和手机排版效果不一样~ 目前只学习了python的基础语法,有些东西理解的不透彻,希望能一边看<机器学习实战>,一边加深对python的理解,所以写的内容很浅显,也许还会 ...

  10. ASP.NET Core Swagger 显示接口注释

    在Startup中 services.AddSwaggerGen(options => { options.SwaggerDoc("v1", new Info { Title ...