Ant-design dataPicker组件所遇问题

Posted 2023-04-13

参考技术A 1 datePicker所加的className 类名作用的范围是输入框，不能控制展开的下拉框样式
2 展开的日历框的位置是相对于body，并不在 <div id='root'>中，而且层级较高，为1050，超过了Modal组件的层级，官方提供的dropdownClassName 属性并不能加上类名，需用popupStyle加在DatePicker 上，可通过这种方法来解决层级过高的问题。
3 Mode属性为year/mode 不能选中
4 结合mode属性，Modal组件也是相对的body的组件，不在root范围内，层级为1000，层级问题可通过 wrapClassName 属性解决 ，但是如果多个modal覆盖出现，或modal中datePicker，也会出现层级问题，这时可以单个设置，也可以根据业务利用js直接提高 ，我在项目中有一个弹框是一定要显示在最上面，因此用的js控制。
5.antd所增加的类名都会带有后缀，如果只是更改css没有影响，如果想利用js去控制css，需查询DOM去获取到真是的类名

react使用ant-design组件库

新建项目并引入组件

1，全局安装脚手架

npm install -g create-react-app

2，新建项目

create-react-app reactantd

3，安装组件

npm install antd --save

4，引入组件

在需要使用组件的页面进行引入并使用

import Button from ‘antd/lib/button‘

import ‘antd/dist/antd.css‘

<Button type="primary">antd</Button>