Question

如何使BottomNavigation组件变粘？为什么它默认不粘？

Answer 1

您可以使用以下CSS将BottomNavigation粘贴到屏幕底部：

const styles = {
  stickToBottom: {
    width: '100%',
    position: 'fixed',
    bottom: 0,
  },
};

然后将其应用到您的BottomNavigation组件：

<BottomNavigation className={classes.stickToBottom}>

您应该知道position: 'fixed'会导致底部导航组件覆盖您的内容（类似地，如果您不这样做，粘贴在屏幕顶部的AppBar也会覆盖内容使用保证金）。您需要提供marginBottom或其他类型的填充，以确保不会隐藏任何内容。

您还可以使用其他一些position选项，例如sticky或absolute。但是，根据我的经验，fixed是最符合您需求的选项。

Answer 2

需要在AppBar中使用它的用户，混合不会引起任何填充冲突。

  <AppBar position="fixed" color="primary" className={{top: "auto", bottom: 0}}>
    <BottomNavigation value={0} onChange={(event, newValue) => {}}>
      <BottomNavigationAction label="One" icon={<LocationOnIcon/>}/>
      <BottomNavigationAction label="Two" icon={<LocationOnIcon/>}/>
    </BottomNavigation>
  </AppBar>

Answer 3

您可以通过<header>的{{1}}属性component来更改。

默认情况下，Material-UI BottomNavigation不粘

3 个答案: