antd RangePicker设置弹框样式问题

一般我们设置样式，直接 className={styles['xxx']} 就好了，但是呢，今天遇到一个问题，在f12调试下，代码放到本地文件，就是死活不生效，无法修改日期组件弹框里面的一些问题，最后经研究，发现：

1 datePicker所加的className 类名作用的范围是输入框，不能控制展开的下拉框样式

2 展开的日历框的位置是相对于body，并不在 <div id='root'>中，而且层级较高，为1050，超过了Modal组件的层级，官方提供的dropdownClassName 属性并不能加上类名，需用popupStyle加在DatePicker 上，可通过这种方法来解决层级过高的问题。

（参考：Ant-design dataPicker组件所遇问题 - 简书）

试了下，发现不是自己想要的，自己只是想修改弹框里面自定义时间范围按钮的样式，不过也算是有所发现。

            <RangePicker
                ranges={
   
   {
                  '最近7天': [moment().startOf('day').subtract(6, 'd'), moment().endOf('day')],
                  '最近30天': [moment().startOf('day').subtract(30, 'd'), moment().endOf('day')],
                }}
                popupStyle={
   
   {   background: 'red'}}
                // popupAlign={"bl tl"} 
                defaultValue={[
                  moment(startDate, 'YYYY-MM-DD'),
                  moment(endDate, 'YYYY-MM-DD'),
                ]}
                allowClear={false}
                onChange={rangePickerChange}
              />

上面有用的代码是这句：popupStyle={ { background: 'red'}}

但是这个是设置弹框的样式，所以还得继续。

              <RangePicker
                ranges={
   
   {
                  '最近7天': [moment().startOf('day').subtract(6, 'd'), moment().endOf('day')],
                  '最近30天': [moment().startOf('day').subtract(30, 'd'), moment().endOf('day')]
                }}
                // className={styles.Child}
                dropdownClassName={styles['aa']}
                defaultValue={[
                  moment(startDate, 'YYYY-MM-DD'),
                  moment(endDate, 'YYYY-MM-DD'),
                ]}
                allowClear={false}
                onChange={rangePickerChange}
              />

这次成功了，有用的代码是这句：dropdownClassName={styles['aa']}

之后在样式文件里，按照自己需要的设置就好了：

.aa{
  :global {
    .ant-menu-horizontal {
      border-bottom: 0px solid #f0f0f0;
    }

    .ant-row {
      border-bottom: 1px solid #eaecef;
    }

    .ant-picker {
      background: #f5f5f5;
    }

    .ant-picker-ranges {
      padding: 0.12rem 0.12rem;
    }

    .ant-tag {
      line-height: 0.34rem;
      padding    : 0 0.16rem;
      margin     : 0 12px;
    }

    .ant-picker-ranges .ant-picker-preset>.ant-tag-blue {
      color       : #1e2329;
      background  : #F5F5F5;
      border-color: #F5F5F5;
    }

    .ant-segmented {
      padding: 0rem;
    }

    .ant-segmented-item-selected {
      background-color: #fcd535;
      box-shadow      : none;
    }

    .ant-segmented-item-label {
      min-height : 0.32rem;
      padding    : 0 0.2rem;
      line-height: 0.32rem;
    }
  }
}

总结：

popupStyle设置整体弹框样式

dropdownClassName设置弹框里面样式

className设置外面input样式

参考：DatePicker 日期选择框-飞冰(ice) v0.x 组件文档-面试哥

antd RangePicker设置弹框样式问题

猜你喜欢