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

css应用于范围时，它也应该反映在内部输入中，您可以编写custom css来使用其选择器设置该输入的样式：

custom.css

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

Answer 2

对于height和width，请在auto处添加CSS值，并使用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"
          }}
        />

我无法在reactjs中将自定义样式设置为antd Date Picker

2 个答案: