【问题标题】：How to make React Material UI <Grid> 100% width如何使 React Material UI <Grid> 100% 宽度
【发布时间】：2021-05-03 13:44:03
【问题描述】：

我正在尝试使这个 Grid 组件宽度为 100%，以便覆盖整个屏幕宽度。

Javascript 文件

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import './CodingTest.css';

const useStyles = makeStyles((theme) => ({
  grid: {
    height: '100%',
    margin: '0px',
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    background: theme.palette.success.light,
    height: '100%',
  },
}));

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

  return (
    <div>
      <Grid container className={classes.grid}>
        <Grid item xs={12} md={6}>
          <Paper className={classes.paper}>1</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

这是我的 .css 文件，我已设法将其设为右侧全宽，但左侧仍有填充，如上图所示

CSS

* {
  min-width: 100%;
}

.MuiContainer-root .MuiContainer-maxWidthLg {
  margin: 0px;
  padding: 0px;
  border: 0px;
  min-width: 100%;
}

@media (min-width: 600px) {
  .MuiContainer-root .MuiContainer-maxWidthLg {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 1280px) {
  .MuiContainer-root .MuiContainer-maxWidthLg {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 100%;
    max-width: 100%;
  }
}

【问题讨论】：

在 css 如果你使用 100vw 元素将使用 100% 的视图宽度。
@buzatto，我尝试将 CSS 中的每 100% 替换为 100vh，但没有成功。

标签： javascript css reactjs flexbox material-ui

【解决方案1】：

我用您的代码创建了一个代码框并检查了 html。我注意到了这一点：

对我来说，页面主体向左增加了 8px。我在index.html 的body 标签中添加了style="margin: 0px;"。

  <body style="margin: 0px;">

现在看起来像：

【讨论】：