最近在做的项目中要用到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. idea 报错 :error:java:Compilation failed:internal java compiler error

    当使用Tomcat运行项目时报错 翻译一下是 错误:Java:编译失败:内部Java编译器错误 这样看来更不理解了 其实原因是Java的版本不一致 查看项目的jdk版本是否一致: file----pr ...

  2. PXC添加新节点

    先拉数据,再启用节点,可以避免SST 拉数据 [root@pxc_node1_172.16.11.132 ~]# /usr/bin/innobackupex --defaults-file=/etc/ ...

  3. hashmap相关面试题

  4. nginx-高并发配置 第七章

    一 .nginx 服务配置优化: 1.nginx进程数,建议按照cpu数目来指定,一般为它的倍数.worker_processes 定义了nginx对外提供web服务时的worker进程数.最优值取决 ...

  5. freeswitch设置支持视频语音编码

    1.修改FreeSWITCH安装路径下/conf/var.xml文件中,增加: <X-PRE-PROCESS cmd=="set" data="proxy_medi ...

  6. 深入学习IOZone【转】

    本文转载自:https://blog.csdn.net/werm520/article/details/7262103 深入学习IOZone 刘智朋       2011-3-29 1        ...

  7. MyBatis进阶(一)

    MyBatis参数传递 1. MyBatis单参数传递 单参数传递不做特殊处理,直接取出参数值赋给xml文件,如#{id} 2. MyBatis多参数传递 多参数传递默认使用{arg1, arg0, ...

  8. 【Visual Studio 扩展工具】如何在ComponentOne的DataTree中实现RightToLeft布局

    概述 C1FlexGrid提供了创建轮廓树的功能,其中可以显示缩进结构,每个节点行旁边都有折叠/展开图标. 然后,用户可以展开和折叠轮廓以查看所需的细节级别. 为此,C1FlexGrid允许您使用其T ...

  9. Linux文件结构

    /: 根目录,所有的目录.文件.设备都在/之下,/就是Linux文件系统的组织者,也是最上级的领导者. /bin: bin 就是二进制(binary)英文缩写.在一般的系统当中,都可以在这个目录下找到 ...

  10. 3.1 eureka自我保护

    故障现象: Down:是下线(掉线)的意思. 导致原因: 一句话:某时刻某一个微服务不可用了,eureka不会立刻清理,依旧会对该微服务的信息进行保存 什么是自我保护模式? 默认情况下,如果Eurek ...