React Material UI 文本字段标签问题答案

【问题标题】：React Material UI textfield label problemReact Material UI 文本字段标签问题
【发布时间】：2021-02-28 02:36:24
【问题描述】：

我的材质 ui 文本字段有问题。有一个带有更多文本输入的表单。当我向下滚动页面时，文本输入标签在标题上重叠。你有什么想法可以解决这个问题。感谢您的帮助！

Without scrolling

Scrolling

代码沙盒：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;
}

【问题讨论】：

请提供一个code sandbox 来重现您的问题。没有看到渲染标题的代码很难回答你的问题。
@RyanCogswell 我附上了 CodeSanbbox 链接 codesandbox.io/s/serverless-night-wpkrb 。谢谢。

标签： reactjs material-ui

【解决方案1】：

轮廓TextField 的标签以z-index of 1 呈现。这与 applied by w3-top 的 z-index 相同。

您需要在styles.css 中提高w3-top 的z-index：

.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

【讨论】：