如何渲染material-ui输入控件，而不是materials-ui-datepicker的文本字段

Question

在我的React（v16.3）应用程序中，我正在使用material-ui-pickers库的DatePicker组件呈现日期选择器控件。该组件呈现Material-UI TextField组件。我喜欢更改此设置，因此它仅呈现Material-UI，Input而不会呈现chrome TextField。

正如我理解的就可以向该与DatePickers TextFieldComponent场（这里在底部），但我无法弄清楚如何使用这个领域。

 <DatePicker 
     id={name}
     TextFieldComponent={...<HOW_TO> ...}
     value={value} 
     onChange={this.handleChange}
     disabled={isReadOnly} />

任何想法如何做到这一点？

更新： 通过找到要使用的正确语法而不是没有chrome的渲染（，等）FormControl，进一步向前迈进了一步InputLabel。但是也不再打开DatePicker。我是否需要以编程方式打开它？

<DatePicker 
    id={name}
    TextFieldComponent={(props) => this.renderInput(props)}
    value={value} 
    onChange={this.handleChange}
    disabled={isReadOnly} />

这是renderInput（）：

renderInput(props: TextFieldProps): any {
   return ( <Input
     id={props.id}
     value={props.value}
     onChange={this.handleChange}
     type={'text'}
     disabled={props.disabled}
   /> );
 }

Answer 1

这是一个有效的例子

在代码沙箱上尝试

class BasicDatePicker extends React.PureComponent {
  state = { selectedDate: new Date() };

  handleDateChange = (date: Date): void => {
    this.setState({ selectedDate: date });
  };

  renderInput = (props: TextFieldProps): any => (
    <Input
      type="text"
      onClick={props.onClick}
      id={props.id}
      value={props.value}
      disabled={props.disabled}
      {...props.inputProps}
    />
  );

  render(): JSX.Element {
    const { selectedDate } = this.state;
    return (
      <div className="picker">
        <DatePicker
          label="Basic example"
          value={selectedDate}
          onChange={this.handleDateChange}
          animateYearScrolling={false}
          TextFieldComponent={this.renderInput}
        />
      </div>
    );
  }
}