Reactjs 反应物料UI文本字段标签问题

我对材质ui文本字段有问题。 有一个表单包含更多文本输入。当我向下滚动页面时，textinputs标签在标题上重叠。你能想出解决这个问题的办法吗。 谢谢你的帮助

代码沙盒：

下面沙箱中的代码：

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>
  );
}

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>
  );
}

.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;
}

---

概述的

TextField

的标签以。这是与相同的z指数

您需要在

样式中增加
w3 top
的z索引。css

：

.w3-top {
  background-color: #daf0da;
  z-index: 2;
}

为了使这些样式胜过在

w3 css

中定义的样式，您需要翻转导入的顺序

发件人：

致：

---

下面是一个工作示例：

概述的

TextField

的标签以。这是与相同的z指数

您需要在

样式中增加
w3 top
的z索引。css

：

.w3-top {
  background-color: #daf0da;
  z-index: 2;
}

为了使这些样式胜过在

w3 css

中定义的样式，您需要翻转导入的顺序

发件人：

致：

---

这里有一个工作示例：

请提供一个重现您的问题的示例。如果没有看到用于呈现标题的代码，就很难回答您的问题。@RyanCogswell我将代码SANBBOX链接括起来。谢谢。请提供一个复制您的问题的列表。如果没有看到用于呈现标题的代码，就很难回答您的问题。@RyanCogswell我将代码SANBBOX链接括起来。非常感谢。

import "w3-css/w3.css";
import "./styles.css";