React app stops working when I add textfield - html

Question

I'm a beginner in React and I'm trying to create a web application's front end UI part and I'm trying to add a text field in the box that I've added but every time i do that, the app does not render anything other than a blank color filled to the screen.
without the text field:
with the text field:
My code:
App.js:
import React, { Component} from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Text1 from './Text1';
import Helmet from 'react-helmet';
import HRLOGO from './images/logo.png';
import ABCLOGO from './images/Group 20399.png';
export default class App extends Component
{
state = {};
render()
{
return (
<div className="hr">
<div>
<img src={HRLOGO} alt="" className="container-div"/>
</div>
<div>
<img src={ABCLOGO} alt="" className="container-div2"/>
</div>
<Helmet>
<style>{'body { background-color: #2d4250; }'}</style>
</Helmet>
<div>
<h1 className="InvoiceStyle">Invoice List</h1>
</div>
<div className="Rectangle">
</div>
<div className="search">
<Text1></Text1>
</div>
<footer className="Privacy">
<p>
Privacy Policy
| ©Highradius Corporation. All rights reserved.
</p>
</footer >
</div>
);
}
}
The css File App.css:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
margin:auto;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
margin:auto;
}
}
.Rectangle {
width: 2000px;
height: 570px;
background: #2e4551;
position: fixed;
top: 130px;
}
.container-div {
display: flex;
height: 50px;
width: 235px;
position: fixed;
top: 8px;
right: 600px;
text-align: center;
}
.InvoiceStyle {
display: flex;
color: #fff;
font-family: 'Open Sans';
font-size: x-large;
position: fixed;
top: 90px;
left: 25px;
}
.container-div2 {
display: flex;
height: 50px;
width: 312px;
position: fixed;
top: 7px;
left: 15px;
}
.Privacy {
display: flex;
position: fixed;
top: 720px;
left: 600px;
color: white;
}
.search {
position: fixed;
top: 155px;
left: 690px;
width: 16%;
height: 40px;
background-color: #fff;
border: none;
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: rgb(11, 68, 253);
}
.App-link {
color: #ff0000;
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Text1.js:
import TextField from "#mui/material/TextField";
const Text1 = () => {
return (
<form noValidate autoComplete = "off">
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</form>
);
}
export default Text1;
Like the page just goes blank, How do I fix this?
Edit:
Browser Console:

Answer 1

The primary error appears to be Cannot read properties of null (reading 'useContext'). React has the concept of ambient Context to simplify passing values down through your Component hierarchy. In this particular case, the TextField component has been assigned a variant theme. In order to lookup and apply that theme, it is expecting to find somewhere in it's parent component hierarchy a ThemeProvider. https://mui.com/material-ui/customization/theming/#theme-provider
Solution: Add a ThemeProvider as a parent component within the render section of your App component.
function render() {
return (<ThemeProvider ...>
...
</ThemeProvider>);
}
After you do this, the TextField component should be able to properly retrieve the context via it's call to the useContext hook. If you run into further issues, make sure you carefully review the basic installation and usage documentation for that library: https://mui.com/material-ui/getting-started/usage/