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

Question

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

我的抽屉代码是：

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 的底部设置为零，但无法正常工作！:( 当我将页脚项的位置更改为固定时，页脚的宽度不适合抽屉。喜欢这个图片：

Answer 1

您可以使用一行 CSS 来完成此操作，无需<Box>或<Grid>。

1. 将页脚分成一个单独的列表。无论如何，它可能是语义/概念级别的。
2. 放margin-top: "auto"

注意：为了简单起见，我内联了 CSS，但在实际应用程序中，您可能希望将其放入类中。

<Drawer variant="permanent">
  <List>
    <ListItem button>
      <ListItemText>1</ListItemText>
    </ListItem>
    <ListItem button>
      <ListItemText>2</ListItemText>
    </ListItem>
  </List>

  <List style={{ marginTop: `auto` }} >
    <ListItem>
      <ListItemText>Footer</ListItemText>
    </ListItem>
  </List>
</Drawer>

Answer 2

对此有一个简单的解决方案。不要使用列表项来创建页脚，只需使用一个简单的 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,
}