Vue无法覆盖Vant样式的问题

问题描述

开发项目的时候有用到van-collapse-item组件，底色默认白色，需求是灰色底色，加了额外的class不生效

解决方案

在class前面加上/deep/

/* 示例 */

.dym_collapse {
  /deep/ .van-cell {
    background-color: #f1f1f1;
  }
  /deep/ .van-collapse-item__content {
    background-color: #f1f1f1;
  }
}

外面包一层dym_collapse是因为怕影响其他页面组件的样式

<!-- 示例 -->

<van-collapse v-model="activeNames" class="dym_collapse">
	<van-collapse-item title="标题 1" name="1">内容</van-collapse-item>
	<van-collapse-item title="标题 2" name="2">内容</van-collapse-item>
</van-collapse>

最终效果（其他组件应该也是这样改）