【Vue.js】如何修改第三方组件库默认样式及修改失效原因

在vue项目开发中,我们经常需要用到第三方组件库,如elementUI、Vant等,这些组件的特点之一是样式都是封装好的,有时候组件的默认样式和我们需要的样式会有一些差别,这时就需要做一些修改。

一、修改组件默认样式

首先我们随便用一个组件来举个例子,就用elementUI主要按钮吧。

<template>
  <div class="index-wrap">
    <el-button type="primary">我是一个主要按钮</el-button>
  </div>
</template>

默认是蓝色背景高度40的,现在我们想让它变成粉色背景,高度30。


这时我们可以通过检查网页的元素获取组件的类名,得到这个按钮组件的类名有"el-button" 和 "el-button--primary" 。

image.png

我们选择哪个都可以添加样式,为了不影响其它类型的按钮,我们就把样式加给"el-button--primary"类吧。

<style scoped>
.el-button--primary {
  background: pink;
  border-color: pink;
  height: 30px;
}
</style>

看上去毫无问题,可是我们的修改却失败了。


甚至连检查元素发现我们写的属性根本没有加上去:

二、失败原因及注意事项

其实我们修改方法并没有问题,问题出在了scoped身上,大家都知道在style标签上加上这个是控制所写的样式不影响其它页面(或组件),可是第三方组件库的东西,其实是一个我们引入的、外来的、写好的组件啊,准确地说它并不是我们当前这个页面(组件)的内容,scoped只影响当前页面(组件),所以我们在scoped里肯定修改不到第三方组件的样式。

所以这时候我们就要去掉scoped,为了不影响当前页面其它内容,我们可以再写一个不带scoped的style标签,同时,为了不污染项目中其它地方使用的到的第三方组件,我们一定要加上一个独有的类名,比如我写的这个组件的类名index-wrap。
当然,如果确定整个项目的这个组件都要改,我们也可以直接写到公共样式文件里。
现在修改如下:

<style scoped>
    /* 其它样式 */
</style>

<style>
.index-wrap .el-button--primary {
  background: pink;
  border-color: pink;
  height: 30px;
}
</style>

现在可以看到我们的自定义样式已经添加上去了,其它的第三方组件修改方法也是一样的~ 可以根据自己的需求修改。


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文为2016年11月9日,『前端之巅』微信群在线分享活动总结整理而成,转载请在文章开头处注明来自『前端之巅』公众...
    尾尾阅读 10,697评论 3 32
  • title: 风格指南type: style-guide 这里是官方的 Vue 特有代码的风格指南。如果在工程中使...
    ChenyuMa阅读 1,105评论 1 1
  • 这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的...
    youins阅读 5,757评论 0 5
  • element-ui 文档 Vue项目接口文档地址 博客 session 和 cookie等 学什么? 1 如何使...
    cj_jax阅读 3,974评论 0 10
  • 本文发布在我的博客vue中慎用style的scoped属性许可协议: 署名-非商业性使用-禁止演绎4.0国际 ...
    2ue阅读 9,114评论 2 7