实际开发中,我们经常会修改UI组件库自带的样式,此时就需要根据组件自带的类目进行样式覆盖,本文以ant-design for Vue中的实际开发中中的常用组件进行举例
ant design 常用组件样式覆盖
一、取消a-selected的聚焦默认样式二、取消a-input的默认样式注意,切记: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;}
持续更新中…