如何解决Material UI的bottom App Bar不显示并实现页面底部固定效果

解决方法 #

你的问题核心有两点：一是代码中完全没有编写BottomAppBar相关代码，所以不会渲染；二是没有配置固定定位的样式规则，无法实现滚动时吸底的效果。按照以下步骤修改即可：

步骤1：导入必要的Material UI组件

在文件头部补充导入：

import { BottomAppBar, Button } from '@material-ui/core';

步骤2：在useStyles中新增底部导航栏的样式

在createStyles的样式对象里新增以下规则：

// 原有样式不变
bottomAppBar: {
  position: 'fixed',
  bottom: 0,
  left: 0,
  zIndex: theme.zIndex.appBar,
  // 适配左侧抽屉的宽度，和已有的appBar规则保持一致
  [theme.breakpoints.up('sm')]: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: drawerWidth,
  },
  display: 'flex',
  justifyContent: 'flex-end',
  gap: theme.spacing(2),
  padding: theme.spacing(1, 2)
},
// 给根容器加底部内边距，避免内容被底部栏遮挡
root: {
  flexGrow: 1,
  paddingBottom: '70px' // 数值和底部栏高度保持一致即可
},

步骤3：在JSX结构中添加BottomAppBar组件

在return的classes.root的div内部，和外层Grid同级的位置添加底部栏：

return (
  <div className={classes.root}>
    {/* 原有Grid代码完全保留 */}
    <Grid container xs={12} md={12}>
      {/* 原有所有Grid内容不变 */}
    </Grid>
    {/* 新增底部导航栏 */}
    <BottomAppBar className={classes.bottomAppBar} color="primary">
      <Button variant="contained" color="default">取消</Button>
      <Button variant="contained" color="secondary">保存修改</Button>
    </BottomAppBar>
  </div>
);

修改后完整代码

import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { Grid, Avatar, TextField, Typography, BottomAppBar, Button } from '@material-ui/core';
import { FC } from 'react';

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1,
            paddingBottom: '70px'
        },
        paper: {
            padding: theme.spacing(2),
            textAlign: 'center',
            color: theme.palette.text.secondary,
        },
        resize: {
            fontSize: 19,
            color: '#828588',
            borderBottom: '1px solid #e4e4e4',
            borderBottomColor: '#384047'
        },
        label: {
            color: '#d5d6d7',
            fontWeight: 560,
            fontSize: '1rem',
            fontFamily: 'Gotham Pro,Proxima Nova,arial,serif',
        },
        textField: {
            color: '#828588',
            background: 'transparent',
            paddingTop: '0.5rem'
        },
        appBar: {
            [theme.breakpoints.up('sm')]: {
                width: `calc(100% - ${drawerWidth}px)`,
                marginLeft: drawerWidth,
            },
        },
        dot: {
            height: '25px',
            width: '25px',
            borderRadius: '50%',
            display: 'inline-block'
        },
        bottomAppBar: {
            position: 'fixed',
            bottom: 0,
            left: 0,
            zIndex: theme.zIndex.appBar,
            [theme.breakpoints.up('sm')]: {
                width: `calc(100% - ${drawerWidth}px)`,
                marginLeft: drawerWidth,
            },
            display: 'flex',
            justifyContent: 'flex-end',
            gap: theme.spacing(2),
            padding: theme.spacing(1, 2)
        }
    }),
);

const MySettings: FC = () => {

    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Grid container xs={12} md={12}>
                <Grid item xs={1} md={1}>
                    <Avatar style={{width: '5.4rem', height: '5.4rem'}} alt="Remy Sharp"
                            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80"/>
                </Grid>
                <Grid item xs={11} md={11} spacing={3}>
                    <Grid item xs={12} spacing={3}>
                        <label className={classes.label}>Full name</label>
                        <TextField
                            className={classes.textField}
                            fullWidth
                            name="name"
                            placeholder="Enter UserName"
                            variant="standard"
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                flexGrow: 1,
                                position: 'relative',
                                color: '#828588',
                            }}
                            InputProps={{
                                classes: {
                                    input: classes.resize,
                                },
                            }}
                            defaultValue="Hiba Youssef"
                        />
                    </Grid>

                    <Grid item style={{marginTop: '2.4rem'}}>
                        <label className={classes.label}>Email</label>
                        <TextField
                            className={classes.textField}
                            fullWidth
                            name="email"
                            placeholder="Enter Email"
                            variant="standard"
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                flexGrow: 1,
                                position: 'relative',
                                color: '#828588',
                            }}
                            InputProps={{
                                classes: {
                                    input: classes.resize,
                                },
                            }}
                            defaultValue="hibatallah69@gmail.com"
                        />
                    </Grid>

                    <Grid item style={{marginTop: '2.4rem'}}>
                        <label className={classes.label}>Password</label>
                        <TextField
                            className={classes.textField}
                            fullWidth
                            name="password"
                            placeholder="Enter New Password"
                            variant="standard"
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                flexGrow: 1,
                                position: 'relative',
                                color: '#828588',
                            }}
                            InputProps={{
                                classes: {
                                    input: classes.resize,
                                },
                            }}
                            defaultValue="......"
                        />
                    </Grid>
                    <Grid item style={{marginTop: '5rem'}}>
                        <Typography style={{color: '#d5d6d7', fontWeight: 640, fontSize: '1.8rem'}}>
                            Your color theme
                        </Typography>
                        <Grid item spacing={8} container  style={{marginTop: '0.6rem'}}>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(123, 104, 238)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(255, 161, 47)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(255, 87, 34)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(244, 44, 44)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(255, 0, 252)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(65, 105, 225)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(95, 129, 255)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(10, 180, 255)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(8, 199, 224)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(7, 160, 146)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(29, 185, 84)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(46, 165, 44)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'rgb(117, 115, 128)'}}></span>
                            </Grid>
                            <Grid item>
                                <span className={classes.dot} style={{backgroundColor: 'red'}}></span>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
            <BottomAppBar className={classes.bottomAppBar} color="primary">
                <Button variant="contained" color="default">取消</Button>
                <Button variant="contained" color="secondary">保存修改</Button>
            </BottomAppBar>
        </div>
    );
}

export default MySettings;

你可以根据需求自行调整底部栏的背景色、按钮文字、布局对齐方式等样式参数。

内容的提问来源于stack exchange，提问作者user14510391