Vue项目中更改Vux组件中的样式

2024-01-12 21:45:22

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>

参考

总结：还是使用深度选择器比较好，比较灵活。