zoukankan      html  css  js  c++  java
  • 修改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 弹窗类组件基本都适用。

  • 相关阅读:
    带你走进Ajax
    基础
    基础
    基础-文字
    C++ part6.5
    操作系统 part4
    操作系统 part3
    计算机网络 part3 HTTP&HTTPS
    计算机网络 part2
    计算机网络 part1 TCP
  • 原文地址:https://www.cnblogs.com/yang-shun/p/13590039.html
Copyright © 2011-2022 走看看