AI教程网 - 未来以来,拥抱AI;新手入门,从AI教程网开始......

自定义vant组件样式

Vant组件样式 AI君 4℃

学习修改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组件样式

喜欢 (0)or分享 (0)