React-admin：多行通知消息答案

【问题标题】：React-admin: Multi-line notification messagesReact-admin：多行通知消息
【发布时间】：2023-03-12 00:13:01
【问题描述】：

如何让 react-admin 在快餐栏上显示多行通知/错误消息？

拥有以下dataProvider：

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

加载 List 组件时显示单行消息：

error notification screenshot

【问题讨论】：

标签： notifications message react-admin

【解决方案1】：

好的，在docs 的帮助下，我设法做我想做的事。定义 App 组件使用的自定义 Layout 组件，并将自定义通知组件传递给它。

// ./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 组件。

// ./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;

error notification screenshot multi-line

【讨论】：