如何在输入的 Material-UI 选择器中添加清晰图标

Question

我用Date picker picker里面有一个选项可以设置为clearable，但是这个选项只有在picker打开的时候才有

也许可以像这样添加自定义按钮：

或者也许不是做一些自定义的事情，而是使用另一个带有清除输入内部选项的选择器？

Answer 1

您可以将 InputProps 和 endAdornment 键添加到您的 DatePicker 组件以自定义输入元素并添加自定义图标，如下所示：

InputProps={{
    endAdornment: (
      <div
        onClick={handleClear}
        style={{ marginRight: 20, cursor: "pointer" }}
      >
        <ClearIcon />
      </div>
    )
  }}

您可以查看 this sandbox 的实际工作示例。