Где я могу изменить изображение профиля в шапке response-admin?

Я использую социальный вход в response-admin (бывший admin-on-rest), и у меня есть изображение пользователя из его социальных сетей, однако я не нашел, как изменить изображение профиля пользователя в правом верхнем углу экрана:

Где я могу изменить изображение профиля в шапке response-admin?

Можно ли установить какие-либо опоры, например настраиваемую кнопку входа в систему или настраиваемую кнопку выхода из системы?

Спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
3 301
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В настоящее время этот процесс требует большого количества кода, так как вам придется полностью переписать UserMenu. Чтобы использовать его, вам также необходимо реализовать собственный Layout с пользовательским AppBar. Процесс будет упрощен, когда https://github.com/marmelab/react-admin/pull/2391 будет объединен.

// in src/MyUserMenu.js
import React, { Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import { translate } from 'ra-core';

class UserMenu extends React.Component {
    static propTypes = {
        children: PropTypes.node,
        label: PropTypes.string.isRequired,
        logout: PropTypes.node,
        translate: PropTypes.func.isRequired,
    };

    static defaultProps = {
        label: 'ra.auth.user_menu',
    };

    state = {
        auth: true,
        anchorEl: null,
    };

    handleChangeEvent = (event, checked) => {
        this.setState({ auth: checked });
    };

    handleMenu = event => {
        this.setState({ anchorEl: event.currentTarget });
    };

    handleClose = () => {
        this.setState({ anchorEl: null });
    };

    render() {
        const { children, label, logout, translate } = this.props;
        if (!logout && !children) return null;
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);

        return (
            <div>
                <Tooltip title = {label && translate(label, { _: label })}>
                    <IconButton
                        arial-label = {label && translate(label, { _: label })}
                        aria-owns = {open ? 'menu-appbar' : null}
                        aria-haspopup = "true"
                        onClick = {this.handleMenu}
                        color = "inherit"
                    >
                        {/* Replace this icon with whatever you want, a user avatar or another icon */}
                        <AccountCircle />
                    </IconButton>
                </Tooltip>
                <Menu
                    id = "menu-appbar"
                    anchorEl = {anchorEl}
                    anchorOrigin = {{
                        vertical: 'top',
                        horizontal: 'right',
                    }}
                    transformOrigin = {{
                        vertical: 'top',
                        horizontal: 'right',
                    }}
                    open = {open}
                    onClose = {this.handleClose}
                >
                    {Children.map(children, menuItem =>
                        cloneElement(menuItem, { onClick: this.handleClose })
                    )}
                    {logout}
                </Menu>
            </div>
        );
    }
}

export default translate(UserMenu);

// in src/MyAppBar.js
import { AppBar } from 'react-admin';
import MyUserMenu from './MyUserMenu';

const MyAppBar = (props) => <AppBar {...props} userMenu = {MyUserMenu} />;

// in src/MyLayout.js
import { Layout } from 'react-admin';
import MyAppBar from './MyAppBar';

const MyLayout = (props) => <Layout {...props} appBar = {MyAppBar} />;

export default MyLayout;

Документация: https://marmelab.com/react-admin/Theming.html#using-a-custom-appbar

Другие вопросы по теме