CSS-/deep/ 修改vant-item的padding

需求

在使用vant-item组件时，需要缩短item间的内边距padding。

分析

我们通过检查，发现生成 HTML 的结构

• 外层 div 的 class 是：van-grid-item。
• 内层 div 的 class 是：van-grid-item__content。

.van-grid-item__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 1rem 0.5rem;
    background-color: #fff;
}

如下图所示，代码中并没有这个div。

      <van-grid :border="false"
                :column-num="1"
                class="sr-pad-bbs-image__grid sr-honour-inline__page-content"
                style="justify-content: center; ">
        <van-grid-item v-for="(item, index) in dataList"
                       :key="index">
          <van-image :src="baseURL + item.image_src + '&size=256'"
                     :fit="imgFit"
                     width="350px"
                     height="240px"
                     lazy-load
                     @click="$utils.previewImages(index, returnImages(dataList))" />
        </van-grid-item>
      </van-grid>

解决方法

在css中添加/deep/让其作用域往下钻

<style lang="less" scoped="">
/deep/.van-grid-item .van-grid-item__content {
  padding: 0.5rem 0.5rem;
}
</style>

参考

Vue 中用 /deep/ 解决样式不生效
css关于/deep/的解释和用法