ant design for Vue 修改组件默认样式

实际开发中，我们经常会修改UI组件库自带的样式，此时就需要根据组件自带的类目进行样式覆盖，本文以ant-design for Vue中的实际开发中中的常用组件进行举例

注意，切记：1、样式覆盖不能加scoped；局部样式覆盖，即只需要当前组件中的样式，需要带上当前组件的选择器；3、全局样式覆盖一般写在外部文件

一、取消a-selected的聚焦默认样式

 /* 去掉下拉框select 的聚焦样式  */
.introduction-box .ant-select-open .ant-select-selection,
.introduction-box .ant-select-focused .ant-select-selection, 
.introduction-box .ant-select-selection:focus, 
.introduction-box .ant-select-selection:active{
  box-shadow: none !important;
}

这里是局部样式覆盖，所以加了当前组件的选择器：.introduction-box

二、取消a-input的默认样式

/* 去掉input聚焦的样式  */
.search-ipt input:focus {
  box-shadow: none;
}
/* 去掉input的边框和白色背景  */
.search-ipt input {
  border: none !important;
  background-color: transparent;
}

持续更新中…