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


目的:

  1.修改antd的默认样式

  2.不污染全局样式

 

实现方法: 

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

  2.需要加个命名空间,避免造成覆盖全局样式

 

一般组件:

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

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

 

另外还有一些弹窗,气泡等组件,因为实现原理是直接将dom插入到body下面,所以我们不能直接在外层dom添加namespace,antd同样提供了修改方法,如下:

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM