antd样式修改如何避免被全局覆盖

antd样式修改如何避免被全局覆盖

一般的antd组件只需要在外层套一个div，引入的时候用

import styles from './ChoiceContents.less';

然后元素的classname用：

<div  className={styles.choiceContentsParent}>
<Swiper>
</Swiper>
</div>

这样的形式就可以了
在less样式文件中，antd组件要写在global里，然后global外面再套一个外层div的classname就行了 PS:要用global需要把样式文件从.css改成.less
e.g:

.choiceContentsParent {
  position: relative;
  text-align: center;
  height: 1080rem;
  width: 1920rem;
  background: #ffffff;
  :global{
    .swiper-slide{
      width: auto!important;
    }
  }
}

还有一些特殊的组件，比如弹出框、气泡确认框、下拉框这些比较特殊的组件，因为实现原理是将dom插到body下，所以我们不能直接在外层dom添加classname，但实际上antd提供了修改的方法，比如dropdown下拉框是 overlayClassName，弹出框是wrapClassName，具体可以去antd官网提供的组件API来查找

这样我们在这些特殊组件外套一个div，然后在组件的标签内设置外层div的类名，按之前方法来在less里添加样式就行了
e.g:

 <div>
  <Modal
    wrapClassName={styles.navmodal}
    visible={visible}
    centered={true}
    footer={null}
    closeIcon
  >
  <div></div>
  </Modal>
  </div>

.navmodal{
  :global{
    .ant-modal-content{
      width: 500px!important;
      height: 406px!important;
      border-radius: 8px!important;
      box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1), -5px -10px 20px rgba(255, 255, 255, 0.3), 5px 10px 20px rgba(0, 0, 0, 0.1)!important;
    }
    .ant-modal-mask{
      background: rgba(0, 0, 0, 0.5)!important;
      /*   backdrop-filter: blur(2px)!important;*/
    }
  }
}