CSS修改组件样式以及修改Element、Vant组件的方法
问题引出在使用vue编写前端代码的时候经常会用到ElementUI、Vant等第三方组件,但是有一些组件里面的样式是封装好的,我们需要在局部组件中修改他们的组件库样式,又不能去除scoped属性(造成组件之间的样式覆盖)。+方法1:适用于sass和less的样式穿透 使用 /deep/外层类 /deep/ 第三方组件类{修改的第三方组件的类}//例:.order_vload {display: f
·
问题引出
在使用vue编写前端代码的时候经常会用到ElementUI、Vant等第三方组件,但是有一些组件里面的样式是封装好的,我们需要在局部组件中修改他们的组件库样式,又不能去除scoped属性(造成组件之间的样式覆盖)。+
方法1:适用于sass和less的样式穿透 使用 /deep/
外层类 /deep/ 第三方组件类{
修改的第三方组件的类
}
//例:
.order_vload {
display: flex;
align-items: center;
justify-content: center;
padding: 2.2vw 4.7vw 1.7vw;
background: rgba(0, 0, 0, 0.7);
border-radius: 1vw;
transform: scale(1.17);
}
.order_vload /deep/ .van-loading__text {
margin: 1.7vw 0 0;
font-size: 3.2vw;
}
方法2:stylus的样式穿透 使用 >>>
.order_vload {
display: flex;
align-items: center;
justify-content: center;
padding: 2.2vw 4.7vw 1.7vw;
background: rgba(0, 0, 0, 0.7);
border-radius: 1vw;
transform: scale(1.17);
}
.order_vload >>> .van-loading__text {
margin: 1.7vw 0 0;
font-size: 3.2vw;
}
更多推荐
已为社区贡献1条内容
所有评论(0)