Vue项目中更改Vux组件中的样式
作者:互联网
Vue项目中更改Vux组件中的样式
因为某些样式不符合自己要求,需要更改Vux组件内部样式.
初次尝试
-
在单文件vue中定位到组件
-
找到需要修改的类名,然后在单文件中直接覆盖
<style lang="less" scoped>
.popup-picker-no-line .weui-cells:before {
border-top: none;
}
.popup-picker-no-line .weui-cells:after {
border-bottom: none;
}
</style>
- 经过多番实验,发现就是不生效,原来是Vue自动添加了一些东西,导致解析不到,问题就是这个scope,父组件的样式将不会渗透到子组件中。
- 所有的scoped中的css最终编译出来都会变成这样:
.popup-no-line[data-v-45660598] .weui-cells[data-v-45660598]
方案1:全局style
- 既然找到问题所在,那么将scope直接去掉,影响太大,可以将这个改写的类放到不带有scope的css文件中。
- 放到common.less 中,终于生效了
.popup-picker-no-line .weui-cells:before {
border-top: none;
}
.popup-picker-no-line .weui-cells:after {
border-bottom: none;
}
方案2:使用深度选择器
- 语法:/deep/ 对应 >>> 但是有些解释器可能识别不了>>>,可以使用/deep/替代。
- 这种写法的好处是,不影响其他vue文件,只影响自己的子组件。
<style scoped>
.popup-picker-no-line /deep/ .weui-cells:before {
border-top: none;
}
.popup-picker-no-line /deep/ .weui-cells:after {
border-bottom: none;
}
</style>
总结:还是使用深度选择器比较好,比较灵活。
标签:picker,Vue,no,cells,weui,popup,组件,line,Vux 来源: https://www.cnblogs.com/songliquan/p/12784355.html