1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 修改antd的默认样式 且不影响全局样式

修改antd的默认样式 且不影响全局样式

时间:2021-03-22 10:49:34

相关推荐

修改antd的默认样式 且不影响全局样式

目的

### 修改antd的默认样式

### 不污染全局样式

实现方法

### antd提供了 :global修改全局样式的写法

### 需要加个命名空间(容器组件类名),避免造成覆盖全局样式

在内部的容器组件内(一般组件)

.namespace{:global{.ant-input{border: none;}} }

实现效果: 去掉class名为namespace下的antd输入框的边框,antd的样式名一定要写在global里面才能生效

另外还有一些弹窗,气泡等组件,因为实现原理是直接将dom插入到body下面,所以我们不能直接在外层dom添加namespace。

antd同样提供了修改方法,如下:

<DropdownoverlayClassName={styles.namespace}overlay={<div>content</div>}trigger={['click']}>下拉菜单</Dropdown>

主要用到overlayClassName添加专门的namespace,再和 :global 配合使用,就能很方便的修改掉antd的默认样式,Popover/Popcomfirm/Dropdown/Modal 弹窗类组件基本都适用。

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