vant自定义校验错误的样式(已验证)

用过vant组件的都知道默认的错误样式很简单，只有简单的红字

而有时候遇到复杂一点的需求就要我们自己封装，而仔细观察元素发现，这个错误校验并没有相应的类名，而是动态添加了元素

如下

这时候有的同学可能就会有疑问，那这样的话怎么通过相应的类名去改变样式

其实很简单，

可以用css的父元素选择器，判断是否有某个类名去添加样式

相应的scss，和less中也有对应的写法

在这里直说scc的写法，其他的自行百度

代码如下

我在这里用:has伪类来实现的，还可以加上一个错误时候的自定义动画

    :deep(.error-animate) {
        &:has(.van-field__error-message) {
            animation: FieldErrorAinmate 0.18s 1;
            overflow: hidden;
            .van-field__value {
                height: 100%;

                .van-field__body {
                    background-color: $color-red16 !important;
                    border: topx(1) solid $color-redDE4A56 !important;

                    .van-field__control--error {

                        &::placeholder {
                            color: red !important;
                        }
                    }
                }
            }
        }
    }