Блог

Я использую пользовательский интерфейс Material для оформления своих компонентов react, но если я помещу некоторые другие элементы в столбцы сетки, они начнут перекрываться друг с другом.

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

const MyReactlayer = () => {

  return (
    <div>
        <h2>"test"</h2>
      <Grid container wrap={"nowrap"}>
        <Grid item md={9}>
          <Grid container wrap={"nowrap"} direction={"column"}>
            <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>
        </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%;
}
 

Я также приложил выходной скриншот