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

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

因为某些样式不符合自己要求,需要更改Vux组件内部样式.

初次尝试

  • 在单文件vue中定位到组件
    Vue项目中更改Vux组件中的样式

  • 找到需要修改的类名,然后在单文件中直接覆盖

<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]

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

方案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>

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

上一篇:C#GridView出现序号列


下一篇:net core WebApi——使用NPOI导入导出操作