React-admin：如何从AppBar隐藏刷新按钮？

Question

我正在基于react-admin创建管理ui，目前正在寻找一种解决方案来隐藏

AppBar

的刷新按钮。 禁用导出按钮很简单（

exporter={false}

）。 RefreshButton 有同样简单的东西吗？我找不到任何可行的解决方案。

我的 React-admin 版本：2.9.3

我知道您可以使用

List

组件上的 'actions' 属性自定义操作，但这似乎已经过时了，因为刷新按钮已移至应用栏..

如果需要，我可以向我的自定义

AppBar

提供代码。

Answer 1

没有简单的解决方案，AppBar 中没有配置 LoadingIndicator 组件的存在： https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/AppBar.js

您可以实现您的 AppBar 组件，然后将其连接到 AppLayout：

// Layout.js

import React from 'react';
import { Layout } from 'react-admin';
import AppBarEx from './components/AppBarEx';

const AppLayout = (props) => ( 
  <Layout
    {...props}
    appBar={AppBarEx}
  />
);

export default AppLayout;

// AppBarEx.js

import React, { Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import classNames from 'classnames';
import MuiAppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { withStyles, createStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import withWidth from '@material-ui/core/withWidth';
import compose from 'recompose/compose';
import { toggleSidebar as toggleSidebarAction } from 'ra-core';
import { UserMenu, Headroom } from 'react-admin';

const styles = theme =>
    createStyles({
        toolbar: {
            paddingRight: 24,
        },
        menuButton: {
            marginLeft: '0.5em',
            marginRight: '0.5em',
        },
        menuButtonIconClosed: {
            transition: theme.transitions.create(['transform'], {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.leavingScreen,
            }),
            transform: 'rotate(0deg)',
        },
        menuButtonIconOpen: {
            transition: theme.transitions.create(['transform'], {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.leavingScreen,
            }),
            transform: 'rotate(180deg)',
        },
        title: {
            flex: 1,
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
        },
    });

const AppBar = ({
    children,
    classes,
    className,
    logo,
    logout,
    open,
    title,
    toggleSidebar,
    userMenu,
    width,
    ...rest
}) => (
    <Headroom>
        <MuiAppBar
            className={className}
            color="secondary"
            position="static"
            {...rest}
        >
            <Toolbar
                disableGutters
                variant={width === 'xs' ? 'regular' : 'dense'}
                className={classes.toolbar}
            >
                <IconButton
                    color="inherit"
                    aria-label="open drawer"
                    onClick={toggleSidebar}
                    className={classNames(classes.menuButton)}
                >
                    <MenuIcon
                        classes={{
                            root: open
                                ? classes.menuButtonIconOpen
                                : classes.menuButtonIconClosed,
                        }}
                    />
                </IconButton>
                {Children.count(children) === 0 ? (
                    <Typography
                        variant="title"
                        color="inherit"
                        className={classes.title}
                        id="react-admin-title"
                    />
                ) : (
                    children
                )}
                {cloneElement(userMenu, { logout })}
            </Toolbar>
        </MuiAppBar>
    </Headroom>
);

AppBar.propTypes = {
    children: PropTypes.node,
    classes: PropTypes.object,
    className: PropTypes.string,
    logout: PropTypes.element,
    open: PropTypes.bool,
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
    toggleSidebar: PropTypes.func.isRequired,
    userMenu: PropTypes.node,
    width: PropTypes.string,
};

AppBar.defaultProps = {
    userMenu: <UserMenu />,
};

const enhance = compose(
    connect(
        state => ({
            locale: state.i18n.locale, // force redraw on locale change
        }),
        {
            toggleSidebar: toggleSidebarAction,
        }
    ),
    withStyles(styles),
    withWidth()
);

export default enhance(AppBar);

Answer 2

对于那些只想隐藏刷新按钮的人，我通过拥有自己的自定义主题来完成它（有关更多信息，请查看反应管理主题文档页面）。

例如，我有两个主题，浅色和深色。 这是我如何设法使用 css 定位刷新按钮的示例：

 export const lightTheme = {
    palette: {
        background: {
            paper: "#fff",
            default: "#fff"
        },
        primary: {
            main: '#607D8B'
        },
        secondary: {
            main: '#607D8B'
        },
        sidebarColor: '#E7ECEE',
        menuItemsColor: '#4B6471'
    },

// overrides default theme css
    overrides: {
        // targeting refresh button
        RaAppBar: {
            toolbar: {
                '& button': {
                    '&:not(:nth-child(1))': {
                        display: 'none'
                    }
                }
            }
        }
    }
};

这不是很好的方式，但出于某种原因，如果您使用 :nth-child(1) 它的目标是：抽屉（应用程序栏中的第一个按钮）和 html DOM 中最后一个的自定义配置文件按钮（参见下图） 。

使用 :nth-child(1) IMG 进行定位

因此，我想到了使用 :not((:nth-child(1)) ，如果你的目标是隐藏它，它可以解决问题，但你也可以使用其他 css 属性来操作它

Answer 3

也不太理想，但我用“刷新”咏叹调标签来定位它。这不是我通常采用的方法，但这是区分 React Admin CSS 中按钮的唯一方法。

header.MuiPaper-root button[aria-label="Refresh"] {
  display: none;
}

Answer 4

如您所知，react admin 使用 mui，我们可以覆盖主题中的 RaLoadingIndicator，但此解决方案将从所有页面隐藏 RaLoadingIndicator。

import {
  ThemeProvider,
  createTheme,
  experimental_sx as sx,
} from "@mui/material/styles";

const theme = {
  ...defaultTheme,
    RaLoadingIndicator: {
      styleOverrides: {
        root: sx({
          display: "none",
        }),
      },
    },
  },
 
};