Bottom margin has no effect on App Bar spacing

Question

This app bar's bottom margin settings are being ignored while other css rules are displaying correctly:

    <AppBar
         className={appBarContainer}
         style={{marginBottom : 100}} // also doesn't work
       >
         <Typography
           variant='h6'
         >{setNavTitle(view)}</Typography>
         <CloseIcon
           onClick={() => setFullViewIsOpen(false)}
           style={{ cursor : 'pointer' }}
         />
       </AppBar>


// App Bar Styles
const defineJss = makeStyles(theme => ({
  appBarContainer : {
    padding : '10px 20px'
    , display : 'flex'
    , flexFlow : 'row nowrap'
    , justifyContent : 'space-between'
    , marginBottom : '100px !important' // removing !important doesn't help
    , '& > *' : {
      border : "2px dashed orange"
    }
  }
}));

The <AppBar /> is from a Material Ui React.js library. Margin top on the next element does work to push everything down but then creates a coupling issue. How can I get margin-bottom to work here?

Working Example

Here I have the issue shown in a style object: https://codesandbox.io/s/cool-heisenberg-jgt9l?fontsize=14

Answer 1

This is happening because you are using position="fixed" (this is the default position of AppBar).

When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions:

1. You can use position="sticky" instead of fixed. ⚠️ sticky is not supported by IE 11.

2. You can render a second component:

   function App() {
     return (
       <React.Fragment>
         <AppBar position="fixed">
           <Toolbar>{/* content */}</Toolbar>
         </AppBar>
         <Toolbar />
       </React.Fragment>
     );
   }
   

3. You can use theme.mixins.toolbar CSS:

   const useStyles = makeStyles(theme => ({
     offset: theme.mixins.toolbar,
   }))
   
   function App() {
     const classes = useStyles();
     return (
       <React.Fragment>
         <AppBar position="fixed">
           <Toolbar>{/* content */}</Toolbar>
         </AppBar>
         <div className={classes.offset} />
       </React.Fragment>
     )
   };
   

In my opinion, the best solution for you is add a separator div, and set it's marginBottom to theme.mixins.toolbar :

function App(props) {
  const classes = useStyles(props);

  return (
    <div className="App">
      <AppBar
      position="fixed"
               className={classes.appBarContainer}
      >
        Placeholder Text
      </AppBar>
      <div className={classes.appBarSeparator} />
      <p>Exterior Text</p>
    </div>
  );
}

const useStyles = makeStyles(theme => ({
  appBarContainer : {
    offset: theme.mixins.toolbar,
    padding : '10px 20px',
    marginBottom:'200px !important'
    , display : 'flex'
    , flexFlow : 'row nowrap'
    , justifyContent : 'space-between'
    ,  '& > *' : {
      border : "2px dashed orange"
    }
  },
  appBarSeparator: theme.mixins.toolbar
}));