当前位置: 首页 > 工具软件 > F3Stepper > 使用案例 >

vant步进器组件van-stepper样式失效

西门智
2023-12-01

有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用。
解决方法:
使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件

<style scoped>
  .a >>> .b { /* ... */ }
</style>

以上的代码会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

注意:如果你使用了Less或Sass等预处理器,可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。

使用Less或Sass等预处理器的写法如下:

.cart_body {
  /deep/ .van-stepper__minus::before {
    position: absolute;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: auto;
    background-color: currentColor;
    content: '';
  }
}
 类似资料: