css修改vant组件的样式

1.背景

使用Vant等组件时，需要在局部组件中修改他们的样式。

例：我想要在下面gird宫格组件中间添加一个红色隔离边框

 Vant组件默认的设置如下，显示的是中间和下面的灰色边框

我设置的代码如下:可是页面没有任何变化

   .van-grid-item {//父盒子
      height: 142px;
      padding: 24px 0;

     .van-grid-item__content::after {//宫格内容控制
        border-width: 0 2px 0 0;
        border-right-color: red;
      }
    }

 2.解决方法

   2.1 去掉style里面的scoped属性

  具体原因不太清楚，去掉就有效果，加上就没有效果

  如图，红色边框生效，但是最后也有一个，后面我们演示一下如何去掉

  2.2  使用 /deep/  或  :(deep)

    此法适用于sass或less的样式穿透，两者方法均可。如果觉得去掉上面的scoped属性怕影响其他布局

 .van-grid-item {
      height: 142px;
      padding: 24px 0;
      /*  例：外层类 /deep/ 第三方组件类{
        修改第三方组件的类
      }  */

      /deep/ .van-grid-item__content::after {
        // 添加红色边框
        border-width: 0 2px 0 0;
        border-right-color: red;
      }

      //  这里演示 :deep()使用，给盒子添加一个背景
      :deep(.van-grid-item__content) {
        background-color: #b9e89c;
        opacity: 0.4;
      }
    }
    // 去除最后一个盒子红色边框
    .van-grid-item:last-child {

     /deep/ .van-grid-item__content::after {
        border:0;
      }
    }

   最后，效果如图，这样可以在组件原基础上进行覆盖和重新设置