Ant Design of Vue 组件样式覆盖技巧

前言

最近使用 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;
}
复制代码

效果

demo 地址

antd input-group style test