时间戳

首页 > 解决方案 > 如何使用 Material UI 和 React 制作包含自定义组件的导航栏？

javascript - 如何使用 Material UI 和 React 制作包含自定义组件的导航栏？

问题描述

我正在尝试使用 Material UI 中的 BottomNavigation。但是，我不想显示标签和文本，而是想使用定制的 ImageButtons 组件。

我有来自 Material UI 的以下代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import ImageButton from '.././buttons/ImageButton';

const useStyles = makeStyles({
    root: {
        width: 1200,
    },
});

export default function CreateProjectNavigation() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    return (
        <BottomNavigation
            value={value}
            onChange={(event, newValue) => {
                setValue(newValue);
            }}
            showLabels
            className={classes.root}
        >
            <ImageButton buttonNr="1" text="Project Details" />
            <ImageButton buttonNr="2" text="Types/Discipline" />
            <ImageButton buttonNr="3" text="Fieldwork" />
            <ImageButton buttonNr="4" text="Personell and Institutions" />
            <ImageButton buttonNr="5" text="Summary" />
        </BottomNavigation>
    );
}

这是 ImageButton 的代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import EditIcon from '@material-ui/icons/Edit';
import MenuBookIcon from '@material-ui/icons/MenuBook';
import RoomIcon from '@material-ui/icons/Room';
import PeopleIcon from '@material-ui/icons/People';
import DoneIcon from '@material-ui/icons/Done';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
    root: {
        margin: theme.spacing(1),
        borderRadius: '50%',
        height: '75px',
        width: '75px',
        '&$disabled': {
            backgroundColor: '#0af7ff',
            color: '#000000',
        },
    },
    disabled: {},
}));

export default function ImageButton({ active, buttonNr, text, handler, link }) {
    let icon;
    const classes = useStyles();

    switch (buttonNr) {
        case '1':
            icon = <EditIcon />;
            break;
        case '2':
            icon = <MenuBookIcon />;
            break;
        case '3':
            icon = <RoomIcon />;
            break;
        case '4':
            icon = <PeopleIcon />;
            break;
        case '5':
            icon = <DoneIcon />;
            break;
        default:
            break;
    }

    return (
        <Grid container direction="column" justify="" alignItems="center">
            <Button
                variant="contained"
                classes={{
                    root: classes.root,
                    disabled: classes.disabled,
                }}
                disabled={active}
                onClick={handler}
                href={link}
            >
                {icon}
            </Button>
            <p>
                <b>{text}</b>
            </p>
        </Grid>
    );
}

不幸的是，在底部导航栏中，ImageButton 变得非常混乱和错误。此外，图像按钮下方的文本仅显示在按钮旁边，而不是在它放置在底部导航中的那一刻下方。

有谁知道该怎么做？

标签： javascriptreactjsmaterial-ui

解决方案

我不确定，但我认为您需要将按钮包装BottomNavigationAction在BottomNavigation. BottomNavigationAction有组件道具。也许你应该在这个道具中传递你的按钮，因为BottomnavigationAction组件不支持 children 道具。在这里您可以查看 API 详细信息https://material-ui.com/api/bottom-navigation-action/

推荐阅读