关于使用CSS变量定制vant组件库里button遇到的问题

Question

我希望使用CSS变量来更改已导入的vant组件库里的van-button的颜色，但是却无法正常应用成功，但也没有报错。请问是什么原因？该如何更改？

以下是我在home.wxml里定义的两个van-button：

<van-button type="primary">按钮</van-button>
<van-button type="danger">按钮</van-button>

呈现效果如下图：

我希望将两个按钮的颜色进行改变，于是我在app.wxss里定义如下：

page{
    --button-danger-background-color:#C00000;
    --button-danger-border-color:#D60000;
    --button-primary-background-color:#13A7A0;
}

但是编译之后按钮依然没有改变颜色，与上图还是一样。请问如何更改？

Answer 1

CSS权重问题。在你自己写的CSS后面加上!important;

page{
    --button-danger-background-color:#C00000 !important;
    --button-danger-border-color:#D60000 !important;
    --button-primary-background-color:#13A7A0 !important;
}