Element UI样式没法修改解决方法。

时间 2019-11-12

标签 element 样式没法修改解决方法繁體版

原文原文链接

本文转载于:猿2048网站Element UI样式没法修改解决方法。php

　　最近在作的项目中要用到Element UI组件来写，很是方便，但毕竟Element UI是有它本身的默认样式的，并非客户所要求的，但就在我想要修改样式时遇到了棘手的问题。css

　　如何引入和使用 Element 这里就很少介绍了，官方文档和百度有不少，这里主要就是写一下题目中提到的样式没法修改的问题。网站

　　Element官方文档中给出最简单的分页组件：spa

<div class="block">
  <span class="demonstration">大于 7 页时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>

　　固然这是 Element 的默认样式，当修改它的样式时，好比每个数字之间的间距和边框，都没有成功，在调试器里也找不到对应的修改。调试

　　如何解决？code

<style lang="scss" scoped>
    @import "../../../../styles/home/proMessage.scss";
</style>

　　引入样式时使用的是上面这段代码，咱们只须要把 scoped 属性删除掉，或者若是 scoped 涉及到其余样式那么就再写一个 style 标签，在新的 style 标签里去修改 Element 组件的样式。 blog

<style lang="scss">
    .el-pagination {
            color: #333333;
        }    
</style>
<style lang="scss" scoped>
    @import "../../../../styles/home/proMessage.scss";
</style>