引出问题

前端的ui组件库几乎人人都会用，但是如果ui官方没有提供样式修改的prop，我们会用到样式穿透：

<van-cell icon="send-gift-o" title="测试"/>

/*这里因为van-cell底层使用了这个class名，我们直接写就好了，具体可以打开控制台检查元素*/
.van-cell{
    &:deep(.van-icon){
        color:red;
    }
}

可是这样写了，动态修改怎么办呢？我们可以如此优化

<van-cell icon="send-gift-o" title="测试" :style="{'--icon-color':'red'}"/>

.van-cell{
    &:deep(.van-icon){
        color:var(--icon-color);
    }
}

使用样式穿透+css变量便可以绕开props动态的修改别人封装好的组件样式