材质ui InputBase不能被其他元素隐藏

z-index发生了一些奇怪的事情。此外，您的导航资产还不够全宽。

我添加了zIndex：9999以及100％的宽度。

https://codesandbox.io/s/material-demo-forked-n87zv

这是修订版：

import React from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import { InputBase } from "@material-ui/core";
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > *": {
        margin: theme.spacing(1),
        width: "25ch"
      }
    },
    main: {
      overflowX: "auto",
      height: "100px",
      width: "100px"
    },
    nav: {
      position: "sticky",
      top: 0,
      backgroundColor: "white",
      zIndex: 9999,
      width: "100%"
    },
    rows: {
      display: "flex",
      flexDirection: "column",
      flexWrap: "nowrap"
    }
  })
);

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <div className={classes.main}>
      <div className={classes.nav}>NNNNNNNNNNNNNNNNNNNNNN</div>
      <div className={classes.rows}>
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
        <InputBase placeholder="xxxxxx" />
      </div>
    </div>
  );
}