Я не могу установить собственный стиль для antd Date Picker в реагирующих

Question

Я хочу установить собственный стиль в antd DatePicker, но он просто не работает. Некоторые стили работают, а некоторые нет.

JSX

 <div >
        <DatePicker
          defaultValue={moment(date ? date : new Date(), dateFormat)}
          defaultPickerValue={moment(date ? date : new Date(), dateFormat)}
          format={dateFormat}
          onChange={this.handleDateChange}
          allowClear={false}
          style={{
            height: "53px",
            width: "155px",
            border: "1px solid blue",
            borderRadius: "0px",
            cursor: "pointer",
            fontSize: "17px",
            margin: "0px",
            padding: "0px"
          }}
        />
      </div>

Ожидаемое поведение:

Фактическое поведение:

В настоящее время высота уменьшается. Я не хочу этого.

Я хочу, чтобы средство выбора даты принимало полную ширину и высоту. Кроме того, как я могу удалить стиль границы по умолчанию в сборщике даты и даты? Можно ли убрать этот значок календаря?

Буду признателен за ваш ответ. спасибо.

Answer 1

Для height и width сделать CSS-значение равным auto, а чтобы скрыть значок календаря, вы просто добавляете свойство suffixIcon с тегом DatePicker.

См. Код ниже или LIVE DEMO -

<DatePicker
          defaultValue={moment(new Date(), 'DD MMM, YYYY')}
          defaultPickerValue={moment(new Date(), 'DD MMM, YYYY')}
          format={'DD MMM, YYYY'}
          onChange={this.handleDateChange}
          allowClear={false}
          suffixIcon
          style={{
            height: "auto",
            width: "auto",
            border: "none",
            borderRadius: "0px",
            cursor: "pointer",
            fontSize: "17px",
            margin: "0px",
            padding: "0px"
          }}
        />

Answer 2

CSS применяется к диапазону, в то время как он также должен отражаться на входе внутри, вы можете написать custom css , чтобы установить стиль этого входа, используя его селектор:

custom.css

.ant-calendar-picker-input.ant-input {
  border-radius: 0px;
  height: 53px;
}