Использование любого компонента Material-UI приводит к ошибке всоставная часть

Question

App.js содержит следующее:

import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import TextField from '@material-ui/core/TextField';


class App extends Component {

  render() {
    return (
      <TextField id="time" type="time" />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

Эта ошибка возвращается в консоли браузера и ничего не отображается:

The above error occurred in the <WithStyles(ForwardRef(TextField))> component:
    in WithStyles(ForwardRef(TextField)) (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries. react-dom.development.js:16013:13

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.useContext is not a function main.js line 1932 > eval:9:55
    useTheme webpack:///./node_modules/@material-ui/styles/esm/useTheme/useTheme.js?:9
    makeStyles webpack:///./node_modules/@material-ui/styles/esm/makeStyles/makeStyles.js?:233
    WithStyles webpack:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js?:65
    React 22
        updateForwardRef
        beginWork
        performUnitOfWork
        workLoop
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        replayUnitOfWork
        renderRoot
        performWorkOnRoot
        performWork
        performSyncWork
        requestWork
        scheduleWork
        scheduleRootUpdate
        updateContainerAtExpirationTime
        updateContainer
        render
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    <anonymous> webpack:///./leadmanager/frontend/src/components/App.js?:57
    js http://localhost:8000/static/frontend/main.js:97
    __webpack_require__ http://localhost:8000/static/frontend/main.js:20
    <anonymous> webpack:///./leadmanager/frontend/src/index.js?:2
    js http://localhost:8000/static/frontend/main.js:109
    __webpack_require__ http://localhost:8000/static/frontend/main.js:20
    <anonymous> http://localhost:8000/static/frontend/main.js:84
    <anonymous> http://localhost:8000/static/frontend/main.js:87

Если <TextField id="time" type="time" /> заменено на <h1>Test</h1> приложение работает без проблем. Та же ошибка возникает при использовании других компонентов, таких как флажки.

Что вызывает эту ошибку и как использовать компоненты material-ui?

Answer 1

Ваш <TextField /> компонент должен быть обернут внутри <form> </form>.

Ознакомьтесь с официальным примером из material-ui