前言
最近使用 Ant Design of Vue 的组件库进行项目开发时，发现有些组件的样式与产品需求存在一定的差异。这时候，我们就需要覆盖第三方的样式。查阅了一番资料，发现以前自己定位第三方组件的样式的做法并不是正确的，于是便有了此文。
需求
项目中的需求是实现一个类似 Google 搜索的组件。这个组件具有多个下拉列表，以及刷新按钮。幸运的是，antd vue 提供了一个 a-input-group 组件，支持 input、select、button 的组件进行自由组合，形成一个新组件。
雏形
经过一番组合，组件的雏形已经有了。但是组件默认的边框和点击时的蓝色光晕使得整个组件看起来并不美观。所以需要将这些默认的组件样式去除掉。
样式覆盖技巧
目标样式定位
样式覆盖
给组件的最外层套一个 class 为 wrapper 的类名，方便在样式覆盖时缩小样式范围，避免污染全局样式。
/* 去除默认边框 */
.wrapper .ant-btn,
.wrapper .ant-select-selection,
.wrapper .ant-select-auto-complete.ant-select .ant-input {
border: none;
}
/* 按钮点击光晕去除 */
button[ant-click-animating-without-extra-node]:after {
border: 0 none;
opacity: 0;
animation: none 0 ease 0 1 normal;
}
