600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > ant design for Vue 修改组件默认样式

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

时间:2019-08-12 16:31:25

相关推荐

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

实际开发中,我们经常会修改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;}

持续更新中…

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。