![9c3ff8215b875486797da925038e4c45.png](https://i-blog.csdnimg.cn/blog_migrate/e08a7ddd1686541dbcdce5cacafd1898.jpeg)
Vue项目中更改Vux组件中的样式
因为某些样式不符合自己要求,需要更改Vux组件内部样式.
初次尝试
- 在单文件vue中定位到组件
![f116834093dd87738eaac4eeecab5924.png](https://i-blog.csdnimg.cn/blog_migrate/f940112e2dd7a28ecf7050d07ade4dd4.jpeg)
- 找到需要修改的类名,然后在单文件中直接覆盖
<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]
![d89a52cd657d17fcb186a7c43ce8883b.png](https://i-blog.csdnimg.cn/blog_migrate/b72e7dcaf53a5a58d12c5839df2d8ace.png)
方案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>
- 参考
总结:还是使用深度选择器比较好,比较灵活。