如何使样式化的 ReacJs Header 组件具有粘性或固定在顶部？

Question

So I have a problem with my Header, I want it to be fixed on top while the page is being scrolled down, that's the Header component:

As seen on the code, I've already tried to use "position = fixed" , but then my header got resized, then I've tried to set it's width like "width = "100%"" but it over sized the page

import { makeStyles } from "@material-ui/core/styles";
import { Grid, Typography } from "@material-ui/core";
import { withRouter } from "react-router-dom";


const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.primary,
    backgroundColor: "#ffeb3b",
    boxShadow: "1px 1px 1px 1px",
    position: "fixed",
  },
  header: {
    backgroundColor: "#4c4c4c",
    color: theme.palette.text.primary,
    flexGrow: 1,
    padding: theme.spacing(2),
    // position: "fixed",
    // minWidth: "100%"
  },
  spacing: {
    marginHorizontal: theme.spacing(2)
  },
  loginName: {
    maxWidth: "20%",
    fontSize: 16,
    fontWeight: "bold"
  },
  title: {
    fontFamily: "Flama medium",
    color: "#FFFFFF",
    fontSize: '1.5rem',
    [theme.breakpoints.down('xs')]: {
      fontSize: '1.18rem',
      maxWidth: 190,
    },
    [theme.breakpoints.up('md')]: {
      fontSize: '1.75rem',
    },
  }
}));

const Header = props => {
  const classes = useStyles();

  return (
    <div className={classes.header} id="some">
      <Grid
        container
        direction="row"
        justify="space-between"
        alignItems="center"
      >
        <Grid >{props.leftIcon}</Grid>
        <Grid >
          <Typography align="center" variant="h5" component="p" className={classes.title}>{props.title}</Typography>
        </Grid>


        <Grid >{props.rightIcon}</Grid>
        {props.rightIconAfter ? <Grid item>{props.rightIconAfter}</Grid> : ""}
      </Grid>
    </div>
  );
};

export default withRouter(Header);

Answer 1

Try adding position: fixed and width: 100vw in your header

Like so:

header: {
    backgroundColor: "#4c4c4c",
    color: theme.palette.text.primary,
    flexGrow: 1,
    padding: theme.spacing(2),
    position: "fixed",
    width: "100vw"
  },

If you see the image, I scrolled it a bit but the position of the header is fixed and occupies the full screen