Antd RangePicker sets the style of the bullet box

Generally, we set the style, just className={styles['xxx']}, but today I encountered a problem. Under f12 debugging, the code is placed in the local file, but it does not take effect, and the date component cannot be modified. Some questions in the box, finally after research, found:

1 The scope of the className added by datePicker is the input box, and the style of the expanded drop-down box cannot be controlled

2 The position of the expanded calendar box is relative to the body, not in <div id='root'>, and the level is higher, 1050, which exceeds the level of the Modal component. The official dropdownClassName attribute cannot add a class name , you need to add popupStyle to DatePicker, this method can solve the problem of too high level.

(Reference: Problems Encountered by Ant-design dataPicker Component - Short Book )

After trying it, I found that it was not what I wanted. I just wanted to modify the style of the custom time range button in the pop-up box, but it was a discovery.

            <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}
              />

The useful code above is this sentence: popupStyle={ { background: 'red'}}

But this is to set the style of the bullet box, so we have to continue.

              <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}
              />

This time it worked, the useful code is this: dropdownClassName={styles['aa']}

Then in the style file, just set it according to your needs:

.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;
    }
  }
}

Summarize:

popupStyle sets the overall popup style

dropdownClassName sets the style inside the pop-up box

className sets the input style outside

Reference: DatePicker Date Selection Box - Feibing (ice) v0.x Component Documentation - Interview Brother