Antd RangePicker define o estilo da caixa de marcador

Geralmente, definimos o estilo, apenas className={styles['xxx']} diretamente, mas hoje encontrei um problema. Na depuração f12, o código é colocado no arquivo local, mas não tem efeito, e o o componente de data não pode ser modificado. Algumas perguntas na caixa, finalmente após pesquisa, encontradas:

1 O escopo do className adicionado por datePicker é a caixa de entrada e o estilo da caixa suspensa expandida não pode ser controlado

2 A posição da caixa de calendário expandida é relativa ao corpo, não em <div id='root'>, e o nível é superior, 1050, que excede o nível do componente Modal. O atributo dropdownClassName oficial não pode adicionar uma classe name , você precisa adicionar popupStyle a DatePicker, este método pode resolver o problema de nível muito alto.

(Referência: Problemas encontrados pelo Componente DataPicker de projeto Ant - Livro Resumido )

Depois de experimentar, descobri que não era o que eu queria, só queria modificar o estilo do botão de intervalo de tempo personalizado na caixa pop-up, mas foi uma descoberta.

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

O código útil acima é esta frase: popupStyle={ { background: 'red'}}

Mas isso é para definir o estilo da caixa de marcadores, então temos 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}
              />

Desta vez funcionou, o código útil é este: dropdownClassName={styles['aa']}

Em seguida, no arquivo de estilo, basta configurá-lo de acordo com suas necessidades:

.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 define o estilo pop-up geral

dropdownClassName define o estilo dentro da caixa de marcador

className define o estilo de entrada fora

Referência: DatePicker Date Selection Box - Feibing (ice) v0.x Documentação do componente - Entrevista Brother