React-admin:多行通知消息 [英] React-admin: Multi-line notification messages

问题描述

我怎样才能让 react-admin 在快餐栏上显示多行通知/错误消息?

How could i make react-admin to show a multi-line notification / error message on the snackbar?

具有以下数据提供者:

export default (type, resource, params) => {
    throw new Error(`
     Message line 1.
     Message line 2.
     Message line 3.
    `);
};

加载列表组件时显示单行消息:

That shows a single line message when loading a List component:

错误通知截图

推荐答案

好的，在 docs 我设法做我想做的事.定义一个供 App 组件使用的自定义 Layout 组件，并向其传递一个自定义的 Notification 组件.

Ok, with the help of the docs I manage to do what I wanted. Defining a custom Layout component to be used by the App component and passing it a custom Notification component.

// ./MyLayout.js
import React from 'react';
import { Layout } from 'react-admin';
import MyNotification from "../MyNotification";

    
const CustomLayout = props => (
    <Layout {...props} notification={MyNotification} />
);

export default CustomLayout;

然后我将自定义 CSS 类传递给 Notification 组件.

Then I pass a custom CSS class to the Notification component.

// ./MyNotification.js
import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import {Notification} from 'react-admin';

// Allow multi-line messages to be displayed
const cssMsg = {
    snackbarContent: {
        whiteSpace: 'pre-wrap'
    }
};

const MyNotification = withStyles(cssMsg)(({classes, ...props}) => (
    <Notification {...props} className={classes.snackbarContent}/>
));

export default MyNotification;

错误通知截图多行

这篇关于React-admin:多行通知消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！