最近在做的项目中要用到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. django开发(二)

    1.django数据库操作---model的使用以及django自带的数据api django中已经做了ORM,表就是一个类class,表中的一个项就是一个对象object,很好用 1.1django ...

  2. Docker Kubernetes 容器扩容与缩容

    Docker Kubernetes 容器扩容与缩容 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...

  3. auto关键字

    使用前: #include<string> #include<vector> int main() { std::vector<std::string> vs; f ...

  4. jQuery validator plugin之Methods

    step method Makes the element require a given step. step( value ) value Type: Number Step value requ ...

  5. Pandas 基础(12) - Stack 和 Unstack

    这节的主题是 stack 和 unstack, 我目前还不知道专业领域是怎么翻译的, 我自己理解的意思就是"组成堆"和"解除堆". 其实, 也是对数据格式的一种 ...

  6. Robot Framework问题记录

    robotframework运行时后台报错UnicodeDecodeError UnicodeDecodeError :'utf-8' codec can't decode byte 0xb2 in ...

  7. Practical Node.js (2018版) 14章, async code in Node

    Asynchronous Code in Node 历史上,Node开发者只能用回调和事件emitters. 现在可以使用一些异步的语法: async module Promises Async/aw ...

  8. 『TensorFlow』模型保存和载入方法汇总

    『TensorFlow』第七弹_保存&载入会话_霸王回马 一.TensorFlow常规模型加载方法 保存模型 tf.train.Saver()类,.save(sess, ckpt文件目录)方法 ...

  9. mybatis_generator合并xml和Java

    之前写了合并xml的插件,今天改了改mybatis-generator源码,合并java和xml都改进去了. 先上图吧. 左边是一开始生成的,中间去掉author加了password字段和方法,右边重 ...

  10. 【C/C++】小坑们

    1.printf("%03d", a); // 输出 a,占 3 位,不够则左边用 0 填充 2.memcpy 所在头文件为 <string.h> 3.string s ...