底部边距对应用栏间距没有影响

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 的默认位置）。

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:
You can use position="sticky" instead of fixed. ⚠️ sticky is not supported by IE 11.
You can render a second component:
function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}
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>
  )
};

在我看来，最好的解决方案是添加一个分隔符 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
}));

底部边距对应用栏间距没有影响

Bottom margin has no effect on App Bar spacing

css

margin

alignment