Material UI Grid组件项重叠问题求助

看起来你的Grid布局和视频播放器的高度设置导致了元素重叠，我来帮你一步步修复：

问题根源分析 #

• 你在内层垂直方向的Grid上设置了wrap={"nowrap"}，这会让垂直排列的子元素强制在同一垂直行显示，不会自动调整空间分配，当内容高度超出容器时就会出现重叠。
• ReactPlayer设置了height={"100%"}，但它的父容器.VPlayer的高度是100%，而该父容器所在的Grid item没有明确的高度限制，导致播放器会尽可能占据所有可用垂直空间，挤压了下方的.BControls区域。

修复方案 #

1. 移除内层Grid的wrap={"nowrap"} #

垂直方向的Grid不需要nowrap属性，让它自动调整子元素的空间分配：

<Grid container direction={"column"}> {/* 去掉wrap={"nowrap"} */}
  <Grid item md={12}>
    <div className="VPlayer">
      <ReactPlayer
        height={"100%"}
        width={"100%"}
        url={"../../video/sample.mp4"}
        muted={true}
        playing={true}
      />
    </div>
  </Grid>
  <Grid item md={12}>
    <div className="BControls"></div>
  </Grid>
</Grid>

2. 让Grid合理分配垂直空间 #

可以通过flex布局让视频容器占据除底部控制栏外的所有剩余空间，同时给外层容器设置明确高度：

<Grid container direction={"column"} style={{ height: "100%" }}>
  <Grid item style={{ flexGrow: 1 }}> {/* 让视频区域占据剩余垂直空间 */}
    <div className="VPlayer">
      <ReactPlayer
        height={"100%"}
        width={"100%"}
        url={"../../video/sample.mp4"}
        muted={true}
        playing={true}
      />
    </div>
  </Grid>
  <Grid item>
    <div className="BControls"></div>
  </Grid>
</Grid>

同时给最外层的div添加高度，确保布局有明确的参照：

div {
  height: 100vh; /* 让最外层容器占满整个视口高度 */
}

3. 调整外层Grid的高度 #

为了避免顶部的<h2>和下方Grid布局重叠，可以给外层Grid设置高度时减去标题的占用空间：

<Grid container wrap={"nowrap"} style={{ height: "calc(100vh - 4rem)" }}>

完整修改后的代码示例 #

JavaScript部分 #

import { Grid } from "@material-ui/core";
import ReactPlayer from "react-player/file";

const MyReactlayer = () => {
  return (
    <div style={{ height: "100vh" }}>
      <h2>"test"</h2>
      <Grid container wrap={"nowrap"} style={{ height: "calc(100vh - 4rem)" }}>
        <Grid item md={9}>
          <Grid container direction={"column"} style={{ height: "100%" }}>
            <Grid item style={{ flexGrow: 1 }}>
              <div className="VPlayer">
                <ReactPlayer
                  height={"100%"}
                  width={"100%"}
                  url={"../../video/sample.mp4"}
                  muted={true}
                  playing={true}
                />
              </div>
            </Grid>
            <Grid item>
              <div className="BControls"></div>
            </Grid>
          </Grid>
        </Grid>
        <Grid item md={3} className="RControls"></Grid>
      </Grid>
    </div>
  );
};

export default MyReactlayer;

CSS部分 #

.VPlayer{
  height: 100%;
  width: 100%;
}
.BControls{
  height: 50px;
  background-color: #3fb8f7;
  width: 100%;
}

这样调整后，视频播放器会自动占据除底部控制栏外的所有垂直空间，Grid布局也会正确分配各元素的位置，不会再出现重叠问题。

内容的提问来源于stack exchange，提问作者Rabner Casandara