Antd RangePicker は箇条書きボックスのスタイルを設定します

通常はclassName={styles['xxx']}だけで直接スタイルを設定するのですが、今日はf12デバッグでコードをローカルファイルに置いているのに反映されず、ボックス内のいくつかの質問は、調査の結果、最終的に次のことがわかりました。

1 datePicker によって追加された className のスコープは入力ボックスであり、展開されたドロップダウンボックスのスタイルは制御できません

2 展開されたカレンダーボックスの位置は <div id='root'> ではなく本体に対して相対的であり、レベルは Modal コンポーネントのレベルを超える 1050 よりも高く、公式の dropdownClassName 属性ではクラスを追加できませんname の場合、DatePicker に popupStyle を追加する必要があります。この方法は、レベルが高すぎる問題を解決できます。

(参照: 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 は外部の入力スタイルを設定します

参考：DatePicker Date Selection Box - Feibing (ice) v0.x Component Documentation - インタビューブラザー

Antd RangePicker は箇条書きボックスのスタイルを設定します

おすすめ