如何解决此错误，无法在上下文中找到实用程序

Question

我正在使用Materialui，在这里我试图显示日期和时间，但它显示的是一个错误，是

无法在上下文中找到实用程序。您要么a）忘记将组件树包装在MuiPickersUtilsProvider中；或b）混合导入命名文件和直接文件。建议：使用模块索引中的命名导入。

请告诉我如何解决此错误

这是App.js

import React, { Fragment, useState } from "react";
import { DateTimePicker } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </Fragment>
  );
}

export default BasicDateTimePicker;

Answer 1

尝试包装它（例如在示例中：https://material-ui.com/components/pickers/）：

import React, { Fragment, useState } from "react";
import DateFnsUtils from '@date-io/date-fns';
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

function BasicDateTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker
        label="DateTimePicker"
        inputVariant="outlined"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DateTimePicker
        autoOk
        ampm={false}
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
        label="24h clock"
      />

      <DateTimePicker
        value={selectedDate}
        disablePast
        onChange={handleDateChange}
        label="With Today Button"
        showTodayButton
      />
    </MuiPickersUtilsProvider>
  );
}

export default BasicDateTimePicker;