如何使 AppBar 背景颜色与导航栏颜色一致

Question

I'm having issues with changing <AppBar> background color. I'm using the Container component to set the maximum screen size.

This causes issues when the screen size is bigger than the maximum screen size. The AppBar background color is expected the rest is white.

How do I remove the white color and make it match the <AppBar> background color?

How do I get it so that white color to match the <AppBar> color so that the navigation looks consistent?

This is what I have so far:

import React from 'react';
import {CssBaseline, Container} from '@material-ui/core/';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

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

  return (
    <div className={classes.root}>
      <CssBaseline />
      <Container maxWidth="sm">
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </Container>
    </div>
  );
}

What am I missing?

The navigation looks wired because it's surrounded by white.

Answer 1

You can go in your css file and add:

body {
  background-color: #FF0000;
}

Answer 2

Place the AppBar outside the div with the class of root or remove the width from root class.

ADDED:

<div>
  <AppBar position="static">
    <Toolbar style={{ maxWidth: 1280 }}>
      // ...
    </Toolbar> 
  </AppBar>
  <Container>
    // ...
  </Container>
</div>