使用深度作用选择器解决andtv覆盖样式不起作用问题

38 阅读1分钟

在项目中我们常常遇到UI设计****师给的设计稿中一些组件中样式和我们所使用的UI框架样式不同,通常我们的做法都是在需要覆盖的组件样式上重写样式,例如:

<style lang="less" scoped>
.ant-form-explain {
   margin-left: 86px !important;
   margin-bottom: -1px;
  //新的样式....
}
</style>

但有时候不起效果,而且每写一个新样式都需要加上!important,这样显得繁琐。
现在有了深度作用选择器让我们一下子就可以解决覆盖框架样式问题

Scoped css深度作用选择器

话不多说,直接上代码:

<style lang="less" scoped>

  //使用深层选择器覆盖antd样式
  ::v-deep .ant-form-explain {
    margin-left: 86px;
    margin-bottom: -1px;
  }
</style>