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;
}
}
最后,效果如图,这样可以在组件原基础上进行覆盖和重新设置