我正在嘗試使用material-ui框架創建一個英雄旗幟。

到目前為止，我所看到的如下:

正如你所看到的，有惱人的左，右填充。我似乎無法擺脫它。

我的英雄組件是這樣的:

import React from 'react'

import Container from '@material-ui/core/Container'

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
    heroContent: {
        backgroundColor: theme.palette.background.paper,
        padding: theme.spacing(8, 0, 6),
    },
    heroButtons: {
        marginTop: theme.spacing(4),
    },
}))

const Hero = () => {
    const classes = useStyles()

    return <Container className={classes.heroContent}></Container>
}

export default Hero

有人可以請解釋一下，我如何才能擺脫左，右填充，并實現全幅？

正如你所看到的，我嘗試在我的風格中設置填充，但是沒有效果。任何指導不勝感激！

disableGutters prop刪除填充。

示例:

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";

export default function SimpleContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container disableGutters maxWidth={false}>
        <Typography
          component="div"
          style={{ backgroundColor: "#cfe8fc", height: "100vh" }}
        />
      </Container>
    </React.Fragment>
  );
}

相關文件:https://material-ui.com/api/container/#props

可以使用sx prop來移除MUI 5中的填充。

<Container sx={{ px: 0 }}>

  </Container>