我无法在 reactjs 中为 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>

预期行为：

实际行为：

它目前缩小了高度。我不要这个。

我希望日期选择器采用全宽和全高。另外，如何在 antd 日期选择器中删除默认边框样式？可以删除那个日历图标吗？

我会很感激你的回复。谢谢你。

Answer 1

为了height并width在那里设置 CSS 值auto以及隐藏日历图标，您只需将suffixIcon属性与DatePicker标签一起放置。

请参阅下面的代码或现场演示-

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