使用外部样式类

Vant Weapp 开放了大量的外部样式类供开发者使用,具体的样式类名称可查阅对应组件的“外部样式类”部分。

注意下面这句话

需要注意的是普通样式类和外部样式类的优先级是未定义的,因此使用时请添加!important以保证外部样式类的优先级。

比如单元格cell给的外部样式类
在这里插入图片描述

<van-cell
  title="单元格"
  value="内容"
  title-class="cell-title"
  value-class="cell-value"
/>
.cell-title {
  color: pink !important;
  font-size: 20px !important;
}
.cell-value {
  color: green !important;
  font-size: 12px !important;
}

注意注意:使用时请添加!important

当然:!important是官网推荐加的,以保证外部样式类的优先级。但也不是所有都需要添加,可先不添加,看是否起效,否则每一个都添加多少有点繁琐。

如果vant没有提供外部样式类或需要修改更多样式可点击此链接

vantweapp官网给出的具体解决样式覆盖问题点击此处

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐