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

Question

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

Answer 1

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

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

然后将其应用于您的BottomNavigation组件:

<BottomNavigation className={classes.stickToBottom}>

您应该知道这position: 'fixed'将导致底部导航组件覆盖您的内容(类似地,AppBar如果您不使用保证金,粘贴到屏幕顶部也会覆盖内容).您需要提供一种marginBottom或其他类型的填充,以确保不隐藏任何内容.

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