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

时间:2021-1-8 作者:admin

前言

最近使用 Ant Design of Vue 的组件库进行项目开发时,发现有些组件的样式与产品需求存在一定的差异。这时候,我们就需要覆盖第三方的样式。查阅了一番资料,发现以前自己定位第三方组件的样式的做法并不是正确的,于是便有了此文。

需求

项目中的需求是实现一个类似 Google 搜索的组件。这个组件具有多个下拉列表,以及刷新按钮。幸运的是,antd vue 提供了一个 a-input-group 组件,支持 inputselectbutton 的组件进行自由组合,形成一个新组件。

雏形

经过一番组合,组件的雏形已经有了。但是组件默认的边框和点击时的蓝色光晕使得整个组件看起来并不美观。所以需要将这些默认的组件样式去除掉。

样式覆盖技巧

目标样式定位

样式覆盖

给组件的最外层套一个 classwrapper 的类名,方便在样式覆盖时缩小样式范围,避免污染全局样式。

/* 去除默认边框 */
.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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。