Antd RangePicker establece el estilo del cuadro de viñetas

En general, configuramos el estilo, solo className={styles['xxx']} directamente, pero hoy encontré un problema. Bajo la depuración f12, el código se coloca en el archivo local, pero no tiene efecto, y el el componente de fecha no se puede modificar Algunas preguntas en el cuadro, finalmente después de la investigación, encontraron:

1 El alcance del className agregado por datePicker es el cuadro de entrada, y el estilo del cuadro desplegable expandido no se puede controlar

2 La posición del cuadro de calendario expandido es relativa al cuerpo, no en <div id='root'>, y el nivel es más alto, 1050, lo que excede el nivel del componente Modal. El atributo dropdownClassName oficial no puede agregar una clase name, debe agregar popupStyle a DatePicker, este método puede resolver el problema de un nivel demasiado alto.

(Referencia: Problemas encontrados por Ant-design dataPicker Component - Libro corto )

Después de probarlo descubrí que no era lo que quería, solo quería modificar el estilo del botón de rango de tiempo personalizado en el cuadro emergente, pero fue un descubrimiento.

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

El código útil anterior es esta oración: popupStyle={ { background: 'red'}}

Pero esto es para establecer el estilo del cuadro de viñetas, por lo que tenemos que continuar.

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

Esta vez funcionó, el código útil es este: dropdownClassName={styles['aa']}

Luego, en el archivo de estilo, simplemente configúrelo según sus necesidades:

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

Resumir:

popupStyle establece el estilo emergente general

dropdownClassName establece el estilo dentro del cuadro de viñetas

className establece el estilo de entrada fuera

Referencia: Cuadro de selección de fecha DatePicker - Documentación del componente Feibing (ice) v0.x - Entrevista a Brother