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

最新推荐文章于 2023-03-09 15:53:53 发布

hzxOnlineOk

最新推荐文章于 2023-03-09 15:53:53 发布

阅读量2k

点赞数 1

分类专栏： antd-design 文章标签：前端 javascript react.js

原文链接：https://www.cnblogs.com/yang-shun/p/13590039.html

版权

29 篇文章 1 订阅

订阅专栏

目的

### 修改antd的默认样式

### 不污染全局样式

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

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

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

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

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

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

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

关注