React+Material UI仅修改Home页面全页背景色失效问题求助

问题描述 #

我遇到如下情况：

我希望仅修改Home页面的背景色为黑色，但当前设置仅对部分区域生效，无法实现Home页全页背景色修改，相关代码如下：

app.js #

const theme = createTheme({
  typography: {
    h1: {
      fontSize: "3rem",
      color: "white"
    },
    h4: {
      color: "white"
    },
    textMSG:{
      fontSize: "3rem",
      fontFamily: ['Estonia', 'cursive'].join(","),
      color: "white"
    } 
  },
  palette: {
    type: "light",
    primary: {
      main: indigo[900],
      light: '#ff7961',
      dark: '#ba000d',
    },
    backgroundHome:{
      paper: "#000000",
    },
    secondary: {
      main: orange[900]
    },    
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
        <Container>
          <Header />
        </Container>
    </ThemeProvider>
  );
}

export default App

home.js #

const Home = () => {
    const classes = useStyles();
    const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
    return (
        <Paper style={{ background: 'black' }}>

        </Paper>
    );
};

export default Home;

header.js #

const Header = (props) => {
    const classes = useStyles();
    const [anchor, setAnchor] = React.useState(null);
    const open = Boolean(anchor);
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
    const handleMenu = (event) => {
    setAnchor(event.currentTarget);
    };
    return (
    <div className={classes.root}>
        <HideOnScroll {...props}>
        <BrowserRouter>
            <AppBar>
            <Toolbar>
                <Typography
                variant="h5"
                component="p"
                color="white"
                className={classes.title}  
                >
                <img src={Logo} alt="Logo" style={{width:'3rem', margin: 'auto'}} />
                </Typography>
                {isMobile ? (
                <>
                    <IconButton
                        style={{ color: 'white' }}
                        className={classes.menuButton}
                        edge="start"
                        aria-label="menu"
                        onClick={handleMenu}
                    >
                    <MenuIcon />
                    </IconButton>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchor}
                        anchorOrigin={{
                            vertical: "top",
                            horizontal: "right"
                        }}
                        KeepMounted
                        transformOrigin={{
                        vertical: "top",
                        horizontal: "right"
                        }}
                        open={open}
                    >
                        <MenuItem
                            onClick={() => setAnchor(null)}
                            component={Link}
                            to="/"
                            color="black"
                        >
                            <ListItemIcon >
                                <HomeIcon />
                            </ListItemIcon>
                            <Typography variant="h6" color="black"> Home</Typography>
                        </MenuItem>
                        <MenuItem
                            onClick={() => setAnchor(null)}
                            component={Link}
                            to="/Personal"
                        >
                            <ListItemIcon>
                            <BookmarksIcon />
                            </ListItemIcon>
                            <Typography variant="h6" color="black"> Personal </Typography>
                        </MenuItem>
                        <MenuItem
                            onClick={() => setAnchor(null)}
                            component={Link}
                            to="/College"
                        >
                            <ListItemIcon>
                            <SchoolIcon />
                            </ListItemIcon>
                            <Typography variant="h6" color="black"> College </Typography>
                        </MenuItem>
                        <MenuItem
                            onClick={() => setAnchor(null)}
                            component={Link}
                            to="/Skills"
                        >
                            <ListItemIcon>
                            <CodeOutlinedIcon />
                            </ListItemIcon>
                            <Typography variant="h6" color="black"> Skills</Typography>
                        </MenuItem>
                        <MenuItem
                            onClick={() => setAnchor(null)}
                            component={Link}
                            to="/Briefcase"
                        >
                            <ListItemIcon>
                            <BusinessCenterOutlinedIcon />
                            </ListItemIcon>
                            <Typography variant="h6" color="black"> Briefcase</Typography>
                        </MenuItem>
                        <MenuItem
                            onClick={() => setAnchor(null)}
                            component={Link}
                            to="/About"
                        >
                            <ListItemIcon>
                            <ContactPhoneIcon />
                            </ListItemIcon>
                            <Typography variant="h6" color="black"> Contact</Typography>
                        </MenuItem>
                    </Menu>
                </>
                ) : (
                <div style={{ marginRight: "2rem" }}>
                    <Button
                        className={classes.menuButtonDesktop}
                        variant="text"
                        component={Link}
                        to="/"
                    >
                        <HomeIcon style={{ color: 'white' }}/>
                        <Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Home </Typography>
                    </Button>
                    <Button
                        className={classes.menuButtonDesktop}
                        variant="text"
                        component={Link}
                        to="/Personal"
                        color="white"
                    >
                        <BookmarksIcon style={{ color: 'white' }}/>
                        <Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Personal </Typography>
                    </Button>                    
                    <Button
                        className={classes.menuButtonDesktop}
                        variant="text"
                        component={Link}
                        to="/College"
                        color="white"
                    >
                        <SchoolIcon style={{ color: 'white' }}/>
                        <Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > College </Typography>
                    </Button>
                    <Button
                        className={classes.menuButtonDesktop}
                        variant="text"
                        component={Link}
                        to="/Skills"
                        color="white"
                    >
                        <CodeOutlinedIcon style={{ color: 'white' }}/>
                        <Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Skills </Typography>
                    </Button>
                    <Button
                        className={classes.menuButtonDesktop}
                        variant="text"
                        component={Link}
                        to="/Briefcase"
                        color="white"
                    >
                        <BusinessCenterOutlinedIcon style={{ color: 'white' }}/>
                        <Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Briefcase </Typography>
                    </Button>
                    <Button
                        variant="text"
                        component={Link}
                        to="/About"
                        color="white"
                    >
                        <ContactPhoneIcon style={{ color: 'white' }}/>
                        <Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Contact </Typography>
                    </Button>

                </div>
                )}
            </Toolbar>
            </AppBar>
            <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/Personal" component={Personal} />
            <Route exact path="/College" component={College} />
            <Route exact path="/Skills" component={Skills} />
            <Route exact path="/Briefcase" component={Briefcase} />
            <Route exact path="/About" component={About} />
            </Switch>
        </BrowserRouter>
        </HideOnScroll>
    </div>
    );
};

export default Header;

请问我需要调整哪些配置或代码，才能实现仅Home页面全页背景色为黑色的效果？

解决方案 #

当前问题是外层的Container组件、根元素默认边距没有清除，加上Home页的Paper没有设置占满视口高度，才导致只有部分区域变黑，按下面步骤修改即可：

1. 移除App.js里外层的全局Container，避免给所有页面加上固定内边距和宽度限制，修改后的App.js渲染部分如下：

function App() {
  return (
    <ThemeProvider theme={theme}>
          <Header />
    </ThemeProvider>
  );
}

2. 在全局CSS文件中添加如下代码，清除默认边距，让根元素占满整个视口：

html, body, #root {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

3. 修改Home页的Paper样式，让它占满全屏，同时预留顶部AppBar的位置避免内容被遮挡：

const Home = () => {
    const classes = useStyles();
    const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
    return (
        <Paper style={{ 
            background: 'black',
            minHeight: '100vh',
            width: '100%',
            margin: 0,
            paddingTop: isMobile ? '56px' : '64px' // 适配不同端的AppBar高度
        }}>
            {/* 原有Home页内容 */}
        </Paper>
    );
};

其他页面不需要额外修改，不会受到Home页背景样式的影响。

内容的提问来源于stack exchange，提问作者Jonh wick