Нижнее поле не влияет на расстояние между панелями приложений

Question

Настройки нижнего поля этой панели приложения игнорируются, в то время как другие правила CSS отображаются правильно:

    <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"
    }
  }
}));

<AppBar /> из библиотеки Material Ui React.js. Вершина поля на следующем элементе работает, чтобы оттолкнуть все вниз, но затем создает проблему соединения. Как мне заставить margin-bottom работать здесь?

Рабочий пример

Здесь у меня есть проблема, показанная в объекте стиля: https://codesandbox.io/s/cool-heisenberg-jgt9l?fontsize=14

Answer 1

Это происходит потому, что вы используете position="fixed" (это позиция AppBar по умолчанию).

Когда вы визуализируете положение панели приложения фиксированным, размер элемента не влияет на остальную часть страницы. Это может сделать некоторую часть вашего контента невидимой за панелью приложения. Вот 3 возможных решения:

1. Вы можете использовать position = "sticky" вместо фиксированного. ⚠️ sticky не поддерживается IE 11.

2. Вы можете отобразить второй компонент:

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

3. Вы можете использовать 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>
     )
   };
   

На мой взгляд, лучшее решение для вас - добавить разделитель div и установить для marginBottom значение 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
}));