React Material UI textfield label problem - reactjs

Question

I have problem with material ui text field.
There is a form with more textinput. When I scroll down the page, the textinputs label overlap on the header. Could You any idea solve this problem.
Thank You for Your help!
Without scrolling
Scrolling
Code Sandbox: https://codesandbox.io/s/serverless-night-wpkrb?file=/src/App.js
Code from sandbox below:
textinput.js
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
root: {
"& > *": {
margin: theme.spacing(1),
width: "25ch"
}
}
}));
const id = (error) => {
if (error === true) {
return "outlined-error";
} else {
return "outlined";
}
};
const shrink = (arg) => {
// ez a func biztosítja, hogy teljes label legyen és ne legyen kezelési hiba
if (arg === "") {
return false;
} else {
return true;
}
};
export default function BasicTextFields(props) {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<TextField
error={props.error}
id={id(props.error)}
label={props.label}
variant="outlined"
onChange={props.change}
style={{ width: props.width }}
value={props.value}
InputLabelProps={{ shrink: shrink(props.value) }}
type={props.type}
inputProps={{ maxLength: props.maxlength }}
/>
</form>
);
}
App.js
import React from "react";
import "./styles.css";
import "w3-css/w3.css";
import BasicTextFields from "./textinput";
export default function App() {
return (
<div className="body">
<div className="w3-top w3-padding-8 w3-border-bottom w3-border-black">
<div className="w3-center w3-padding-16">
<div className="t1">
TündErella - <span style={{ fontSize: 45 }}> some text here.</span>{" "}
</div>
</div>
</div>
<div style={{ marginTop: 200 }}>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
<div className="name">
<BasicTextFields label="Vezetéknév: *"></BasicTextFields>
<BasicTextFields label="Keresztnév: *"></BasicTextFields>
</div>
<div className="name">
<BasicTextFields label="Vezetéknév: *"></BasicTextFields>
<BasicTextFields label="Keresztnév: *"></BasicTextFields>
</div>
<div className="name">
<BasicTextFields label="Vezetéknév: *"></BasicTextFields>
<BasicTextFields label="Keresztnév: *"></BasicTextFields>
</div>
<div className="name">
<BasicTextFields label="Vezetéknév: *"></BasicTextFields>
<BasicTextFields label="Keresztnév: *"></BasicTextFields>
</div>
</div>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.body {
border: 1px solid white;
/*background-image: url("./static/background_maarten-deckers_1.jpg");*/
background-color: ivory;
}
.w3-top {
background-color: #daf0da;
}
.t1 {
font-size: 60px;
font-family: "Great Vibes", cursive;
}

Answer 1

The label for outlined TextField is rendered with a z-index of 1. This is the same z-index as applied by w3-top.
You need to bump up the z-index of w3-top in your styles.css:
.w3-top {
background-color: #daf0da;
z-index: 2;
}
In order for these styles to win over the styles defined in w3-css, you need to flip the order of your imports
from:
import "./styles.css";
import "w3-css/w3.css";
to:
import "w3-css/w3.css";
import "./styles.css";
Here's a working example: https://codesandbox.io/s/override-w3-top-z-index-k5fjv?file=/src/styles.css:198-252