如何将两个不同的自定义 CSS 添加到相同的 ant-design DatePicker答案

【问题标题】：How to add two different custom CSS to same ant-design DatePicker如何将两个不同的自定义 CSS 添加到相同的 ant-design DatePicker
【发布时间】：2021-05-10 14:58:27
【问题描述】：

<Menu.Item 
                  key="4" 
                  disabled={true} 
                  className={"connectM-DatePicker-customer-container ant-dropdown-menu-item-customer-disabled"}>
                    <p style={{ whiteSpace: "nowrap" }}>
                        Date Range
                    </p>
                    <div className={"datepicker-text-pair"}>
                        <p className="from-to">From</p>
                      <DatePicker
                         
                        defaultValue={moment()} 
                        format={["DD/MM/YYYY"]} 
                        bordered={false} />
                    </div>
                    <div className={"datepicker-text-pair"}>
                        <p className="from-to">To</p>
                      <DatePicker
                        //onChange={this.onToChange} 
                        defaultValue={moment()} 
                        format={["DD/MM/YYYY"]} 
                        bordered={false} />
                    </div>
                    <Button 
                      size={"small"} 
                      className={"apply-button-datepicker"} 
                      //onClick={}
                    >
                        <Typography.Text style={{ color: "black" }} strong>DONE</Typography.Text>
                    </Button>
                </Menu.Item>

.ant-picker-panel-container {
  background-color: white;
  .ant-picker-header {
    color: black;
  }
  .ant-picker-header-super-prev-btn {
    color: black;
  }
  .ant-picker-header-prev-btn {
    color: black;
  }
  .ant-picker-header-super-next-btn {
    color: black;
  }
  .ant-picker-header-next-btn {
    color: black;
  }
}

我在两个不同的组件中使用来自 antd（ant design）的两个 DatePicker，我在一个组件中添加了自定义 CSS，并将相同的 CSS 复制到另一个文件并更改了背景，但它也影响了另一个组件 datePicker。如何向这些文件添加两个不同的自定义 CSS。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

<DatePicker
  className="date_picker_1"
  dropdownClassName="dropdown_class_name_1"
/>
.date_picker_1 { 
   //antd class here
}
.dropdown_class_name_1 { 
   //antd class here
}

【讨论】：

【解决方案2】：

< DatePicker
dropdownClassName = "dropdown-class-name-1"
defaultValue = {
  moment()
}
format = {
  ["DD/MM/YYYY"]
}
bordered = {
  false
}
/>

.dropdown-class-name-1 .ant-picker-panel-container {
  background-color: white !important;
  .ant-picker-header {
    color: black !important;
  }
  .ant-picker-header-super-prev-btn {
    color: black !important;
  }
  .ant-picker-header-prev-btn {
    color: black !important;
  }
  .ant-picker-header-super-next-btn {
    color: black !important;
  }
  .ant-picker-header-next-btn {
    color: black !important;
  }
}

enter image description here

【讨论】：