[youzan/vant]自定义 CSS 变量，样式优先级太高，无法修改

设备 / 浏览器

chrome

Vant 版本

3.1.0-beta.0

Vue 版本

3.1.1

描述问题

通过官网的例子自定义 CSS 变量，https://vant-contrib.gitee.io/vant/v3/#/zh-CN/config-provider#zi-ding-yi-css-bian-liang 在入口页App.vue文件：<style> :root { --van-button-primary-background-color: red; } </style>

在浏览器中表现为：

目前我的解决办法：在对应的变量加 !important ；但是这种写法不仅不优雅，还会有优先级的问题。不知道有没有好的思路解决。

AtLastDopamine

这跟优先级没关系喔，你需要注意一下引用顺序，先引入组件样式，再进行覆盖

或者直接用 ConfigProvider 组件也可以

chenjiahan

十分感谢你的回复，我的引用也是参照官网推荐的按需加载，https://vant-contrib.gitee.io/vant/v3/#/zh-CN/quickstart；索引：引入组件 => 方式一. 通过 babel 插件按需引入组件，我对babel不是特别熟悉。基本就是copy 😂

至于您说的直接用 ConfigProvider 组件；我开始也是这么使用的，但是当修改px类型的单位时，数值不会被 postcss-px-to-viewport 转化为 vw/vh 单位。所以才会采用 :root 这种方式

AtLastDopamine

你可以把 CSS 变量设置在其他节点上，这些节点可以覆盖 root 节点，比如 #app

#app {
  ....
}

chenjiahan

使用vite 按需引入，在vue文件import组件，在一个独立的css文件中定义var变量，main.js引入，这个顺序确实不对，我改如何改变引用顺序？

yasuomang

这么设置可以覆盖:root，但是组件样式却没有改变

yasuomang

chenjiahan

@chenjiahan 这个问题能帮忙解答一下吗

yasuomang

遇到了同样的问题，用了VantResolver，就是vant自带的样式优先级太高了，issue没解决就直接close了，开源库就是这样维护的吗？

scarsu

同样在main.js最后引入自定义的:root变量，还是会被vant覆盖，看了生产代码发现是因为vant样式引入的时机很晚。为了覆盖vant自带的:root变量，要用优先级更高的#app去定义变量，这合理吗？作为一个基础ui库，样式应该最早引入，而不是让使用者费尽心力去覆盖样式啊。

scarsu

回答