将自定义按钮添加到react-admin应用栏

时间:2019-10-04 07:42:59

标签: react-admin

在我的react-admin应用程序中,我想在“刷新”按钮旁边添加一个自定义按钮。不幸的是,我找不到有关该操作的任何信息。

1 个答案:

答案 0 :(得分:1)

使用以下方法,您可以在“刷新”按钮”之前添加自己的按钮: https://marmelab.com/react-admin/Theming.html#customizing-the-appbar-content

// MyAppBar.js

import React from 'react'
import { AppBar } from 'react-admin'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton' 
import BackIcon from '@material-ui/icons/ArrowBack'

const styles = {
    title: {
        flex: 1,
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
    },
    spacer: {
        flex: 1,
    },
}

const MyAppBar = withStyles(styles)(({ classes, ...props }) => (
    <AppBar {...props}>
        <Typography
            variant="title"
            color="inherit"
            className={classes.title}
            id="react-admin-title"
        />
        <span className={classes.spacer} />
        <IconButton color="inherit" >
            <BackIcon/>
        </IconButton>
    </AppBar>
))

export default MyAppBar