reactjs - Material UI BottomNavigation 默认情况下不具有粘性

Question

如何制作BottomNavigation组件粘性？为什么默认情况下不具有粘性？

Answer 1

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

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

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

<BottomNavigation className={classes.stickToBottom}>

您应该知道 position: 'fixed' 会导致底部导航组件覆盖您的内容(同样，AppBar 粘在顶部)如果您不使用边距，您的屏幕也会覆盖内容)。您需要提供 marginBottom 或某种其他类型的填充，以确保您的任何内容都不会被隐藏。

您还可以使用其他一些位置选项，例如粘性或绝对。但是，根据我的经验，fixed 是最适合您需求的选项。