ant-design-vue修改input组件样式

问题场景

不得不说ant-design-vue的样式是真的难改。。。今天尝试了很多种方案，都无疾而终。最终，通过全局scss文件引入的方式解决了。
几种方案：

1. 直接行内样式，发现部分可以，部分不行
2. 将<style lang="scss" scoped> 的scoped属性去掉，可以直接修改，但是会影响到其他组件的样式。
3. 利用::v-deep（vue3.0中可以使用:deep()）进行深度修改结果和方法2一样的。
4. 此外，还有/deep/、>>>等等样式穿透的方法都可以修改样式，但都不太好效果。
5. 最终，采纳这篇博客https://blog.csdn.net/weixin_45803990/article/details/116398126,定义全局scss，然后去修改。

过程

● 右键检查元素(F12)
● 在组件中,自定义类名home-ant-input

● 找到要修改的类名,如图，这里我是修改input组件的样式就是.home-ant-input.ant-input-affix-wrapper .ant-input

● 新建一个global.scss文件，并且在main.js下挂载
● 在global.scss 文件，写入自己要修改的样式

.home-ant-input.ant-input-affix-wrapper .ant-input {
  background-color: red;
}

● 查看效果，可以发现修改成功，且其他Input组件样式没有受到影响。

总结

以上就是本人的踩坑过程了，欢迎评论区各位大佬提供更多优雅的写法~ respect!