vant自定义样式,vant如何去除组件默认的样式
本文主要介绍如何修改vant的less style变量方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
修改vant的less style变量vant组件的样式修改，比如可以给app的样式添加一个效果。如图，你灵机一动，有了添加btn类名的新方法：增加权限，限制样式条件。
修改vant的less样式变量
全球css简介
导入“vant/lib/index . CSS”；
引入单一组件样式
导入“vant/lib/toast/style/less”；
创建一个新的less文件来修改vant的less变量。
比如conver _ vant.less，在这里修改变量。
//吐司
@toast-background-color:蓝色；
@action-sheet-max-height:80%！重要；
根据vue.config.js官方提示进行配置
注意在这里使用绝对路径，并记住在@import后面加上双引号 。
const path=require(path )
模块.导出={
css:{
loaderOptions:{
减：{
修改版本：{
//通过本地less文件覆盖变量
//true；@ import your-less-file-path . less ；
黑客：`真的；@ import $ { path . resolve(_ _ dirname，。/src/common/cover _ vant . less )} ；`
}
}
}
}
}
在修改并重新运行npm run serve之前，您看不到效果。
vant组件的样式修改
Vant组件主要在VUE使用，有一些风格上的修改。
例如
这样一个组件，我们修改它的样式，这里是我修改的样式，是白色的。
可以在app的样式中加入
。van-下拉菜单_ _栏{
背景：#6609f2！重要；
box-shadow:无！重要；
}。下拉菜单标题。van-下拉菜单_ _标题-活动{
颜色：#fff！重要；
}
你是怎么知道这里的班名的？通过网页评论元素获取。
但是这种修改会造成一个问题，就是这种风格变得全局化。
其他页面将使用这样的风格。
此时可以在单独的页面中设置，但要注意spcoed是去掉的，否则不会生效。
style lang=less 。van-下拉菜单_ _栏{
背景：#6609f2！重要；
box-shadow:无！重要；
}。下拉菜单标题。van-下拉菜单_ _标题-活动{
颜色：#fff！重要；
}
/风格
效果如图
但是后来发现又出现了新的问题。子组件在同一个页面上，所以它们被修改了，但是它们不能同时显示。
后面灵机一动，又想到了一个新的方法
Html结构：
van-下拉菜单class=btn
van-drop down-item v-model= value city :options= option city @ change= change city /
van-drop down-item v-model= value price :options= option price @ change= change drop down /
van-drop down-item v-model= value year :options= option year @ change= change year /
/van-下拉菜单
加了一个btn 的类名：提高权限，限制样式条件
css:
style lang=less 。btn。van-下拉菜单_ _栏{
背景：#fff！重要；
}。btn。van-下拉菜单__title {
颜色：#333！重要；
}
/风格
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。