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

Question

我在资料ui文字栏位有问题。有一个具有更多文本输入的表单。当我向下滚动页面时，文本输入标签在标题上重叠。你能想到解决这个问题吗？谢谢你的帮助!

不滚动

滚动

代码沙箱：https://codesandbox.io/s/serverless-night-wpkrb?file=/src/App.js

下面是沙箱的代码：

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

概述TextField的标签是用Z-指数1呈现的。这是与由w3-top应用相同的z索引.

您需要在您的w3-top中增加styles.css的z索引。

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

为了使这些样式赢得w3-css中定义的样式，您需要翻转导入的顺序

发自：

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

至：

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

下面是一个有用的示例：https://codesandbox.io/s/override-w3-top-z-index-k5fjv?file=/src/styles.css:198-252