自定义vant组件样式

学习修改vant组件样式无法显示的问题

由于scoped只对当前.vue文件中的template模板标签内的结构有效，所以在含有scoped属性的style标签中修改vant组件样式是无效的。

所以先确保.vue文件的style标签没有使用scoped属性，然后在浏览器中查看想要修改的组件的类名即可。

如上图中使用类名.van-button--default修改button的背景颜色

<style>
  .van-button--default{
    background-color: #4fc08d;
    border-color: #4fc08d;
    color: #fff
  }
</style>

如上所示新添的样式已经覆盖原有的样式。

但如果使用了大部分的default类型的button组件，然后只是修改部分的样式，上面的写法就不太合适了，因为它会作用于当前页面的所有.van-button--default类名的组件。可以在想要修改的vant-button组件外面包裹一层div标签。

<div class="custom">
     <van-button type="default">默认按钮</van-button>
</div>

<style>
  .custom > .van-button--default{
    background-color: #4fc08d;
    border-color: #4fc08d;
    color: #fff
  }
</style>

这样就可以只作用于部分，而不是全局了。当然，要是嵌套过多，上面的写法写长了也不太美观，可以使用sass或者less来写。

<style lang="less">
  .custom{
  .van-button--default{
    background-color: #4fc08d;
    border-color: #4fc08d;
    color: #fff
  }
}
</style>

如果在开发中使用了css module，则写法如下：

<style module lang="less">
.custom{
  :global{ // :global 为css module 中的关键字
    .van-button--default{
      background-color: #4fc08d;
      border-color: #4fc08d;
      color: #fff
    }
  }
}

多文件写法，把修改vant组件的样式代码抽离出去，然后在main.js文件中引入全局使用。
新建一个resetvant.less文件

文件内容

// success页面

.custom{
  .van-button--default{
    background-color: #4fc08d;
    border-color: #4fc08d;
    color: #fff
  }
}

由于我当前项目页面较少，样式代码也不是很多所有只是用了一个文件，用每个页面的根元素的类名来包裹住所有的样式代码，这样就不会污染到其他页面。然后在mian.js文件引入

import '@/styles/resetvant.less'; // 修改vant组件默认样式

到此完成。

如果要修改的页面较多且代码量较大，建议每个页面对应单独的less文件，把全部的less文件引入到main.less文件，再在main.js文件中单独引入main.less文件，这样比较方便管理。

main.less

main.js

import '@/styles/vant/main.less';

作者：Kotoba209_
原文链接：https://blog.csdn.net/Kotoba209_/article/details/104278876

转载请注明：www.ainoob.cn » 自定义vant组件样式