reactjs - 如何将页脚添加到材质 ui 抽屉组件？

Question

我的材质 UI 抽屉组件如下所示，它由 List 组件组成，现在我想像图像一样将 Footer 添加到抽屉组件中。我怎样才能做到这一点？

我的抽屉代码是：

import React from 'react';
import { makeStyles, fade } from '@material-ui/core/styles';
import { Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, InputBase, Paper } from '@material-ui/core';
import {
    Home as HomeIcon, People as PeopleIcon, DnsRounded as DnsRoundedIcon,
    PhotoSizeSelectActual as PermMediaOutlinedIcon, Public as PublicIcon, ExitToApp,
    SettingsEthernet as SettingsEthernetIcon, SettingsInputComponent as SettingsInputComponentIcon,
    Timer as TimerIcon, Settings as SettingsIcon, PhonelinkSetup as PhonelinkSetupIcon, Search as SearchIcon
} from '@material-ui/icons';
import clsx from 'clsx';
import Wrapper from '../../../HOC/Wrapper/Wrapper';

const sidebarWidth = 50

const useStyles = makeStyles(theme => ({
    root: {
        maxWidth: sidebarWidth
    },
    categoryHeader: {
        paddingTop: theme.spacing(2),
        paddingBottom: theme.spacing(2),
        textAlign: 'right'
    },
    categoryHeaderPrimary: {
        color: theme.palette.common.white,
    },
    item: {
        paddingTop: 1,
        paddingBottom: 1,
        color: 'rgba(255, 255, 255, 0.7) !important',
        '&:hover,&:focus': {
            backgroundColor: 'rgba(255, 255, 255, 0.08)',
        },
        textAlign: 'right'
    },
    itemCategory: {
        backgroundColor: '#232f3e',
        boxShadow: '0 -1px 0 #404854 inset',
        paddingTop: theme.spacing(2),
        paddingBottom: theme.spacing(2),
    },
    firebase: {
        fontSize: 24,
        color: theme.palette.common.white,
        justifyContent: 'center'
    },
    itemActiveItem: {
        color: '#4fc3f7',
    },
    itemPrimary: {
        fontSize: 'inherit',
    },
    itemIcon: {
        minWidth: 'auto',
        marginRight: theme.spacing(2),
    },
    divider: {
        marginTop: theme.spacing(2),
    },
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
        },
        marginRight: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing(1),
            width: 'auto',
        },
        display: 'flex',
        justifyContent: 'flex-end',
    },
    searchIcon: {
        width: theme.spacing(7),
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',

    },
    inputRoot: {
        color: 'inherit',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 7),
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: 120,
            '&:focus': {
                width: 120,
            },
        },
    },
    drawerFooter: {
        // display: 'flex',
        // flexGrow:1,
        // width: '',
        position: 'relative',
        top: 'auto',
        bottom: 0,
        // backgroundColor: '#fff !important',
        // paddingTop: '0.5rem',
        boxSizing: 'border-box'
    },
}))

const categories = [
    {
        id: 'بازدید',
        children: [
            { id: 'مکاتبات', icon: <PeopleIcon />, active: true },
            { id: 'مغایرات', icon: <DnsRoundedIcon /> },
            { id: 'تخلفات', icon: <PermMediaOutlinedIcon /> },
            { id: 'اطلاعات بازدید', icon: <PublicIcon /> },
            { id: 'چک لیست عمومی', icon: <SettingsEthernetIcon /> },
            { id: 'لیست خدمات', icon: <SettingsInputComponentIcon /> },
        ],
    },
    {
        id: 'ابزارها',
        children: [
            { id: 'مسیریابی تا دفتر', icon: <SettingsIcon /> },
            { id: 'دفاتر پیشخوان اطراف', icon: <TimerIcon /> },
            { id: 'پراکندگی دفاتر در منطقه', icon: <PhonelinkSetupIcon /> },
        ],
    },
];

const Sidebar = (props) => {
    const classes = useStyles()

    const drawer = (
        <div>
            <List disablePadding >
                <ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory)}>
                    پست و پیشخوان
                </ListItem>
                <ListItem className={clsx(classes.item, classes.itemCategory)}>
                    <ListItemIcon className={classes.itemIcon}>
                        <HomeIcon />
                    </ListItemIcon>
                    <ListItemText
                        classes={{
                            primary: classes.itemPrimary,
                        }}
                    >
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>
                            <InputBase
                                placeholder="کد دفتر..."
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput,
                                }}
                                inputProps={{ 'aria-label': 'search' }}
                            />
                        </div>
                    </ListItemText>
                </ListItem>
                {categories.map(({ id, children }) => (
                    <React.Fragment key={id}>
                        <ListItem className={classes.categoryHeader}>
                            <ListItemText
                                classes={{
                                    primary: classes.categoryHeaderPrimary,
                                }}
                            >
                                {id}
                            </ListItemText>
                        </ListItem>
                        {children.map(({ id: childId, icon, active }) => (
                            <ListItem
                                key={childId}
                                button
                                className={clsx(classes.item, active && classes.itemActiveItem)}
                            >
                                <ListItemIcon className={classes.itemIcon}>{icon}</ListItemIcon>
                                <ListItemText
                                    classes={{
                                        primary: classes.itemPrimary,
                                    }}
                                >
                                    {childId}
                                </ListItemText>
                            </ListItem>
                        ))}

                        <Divider className={classes.divider} />
                    </React.Fragment>
                ))}
            </List>
            <ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}>
                Footer
            </ListItem>
        </div>
    )

    return (
        <Wrapper>
            <Drawer
                className={classes.root}
                variant="permanent"
                anchor="right"
            >{drawer}</Drawer>
        </Wrapper>
    );
}

export default Sidebar;

这就是它的图像：

我应该如何将页脚部分粘贴到抽屉的底部？我在其 CSS 代码中将页脚的 ListItem 的底部设置为零，但无法正常工作！:( 当我将页脚项目的位置更改为固定时，页脚的宽度不适合抽屉。像这个图片：

标签： reactjsmaterial-ui

Answer 1

有一个简单的解决方案。而不是使用列表项来创建页脚，只需使用一个简单的 div 并给它一个类，使其进入抽屉的底部。

您当前的代码：

<ListItem className={clsx(classes.firebase, classes.item, classes.itemCategory, classes.drawerFooter)}>
    Footer
</ListItem>

而是使用：

<div className={classes.bottomPush}>
    <Typography>Footer</Typography>
</div>

对于课堂使用：

bottomPush: {
    position: "fixed",
    bottom: 0,
    textAlign: "center",
    paddingBottom: 10,
}