如何在 react-admin 中集成自定义的 topBar 组件

【问题标题】：How to integrate customized topBar component in react-admin如何在 react-admin 中集成自定义的 topBar 组件
【发布时间】：2021-07-27 05:11:41
【问题描述】：

我有自定义的新 AppBar 组件，我想在我的页面中显示新自定义的 AppBar 而不是旧的 AppBar。

我想使用下面提到的链接中的新 appBar。

https://material-ui.com/components/app-bar/#app-bar-with-a-primary-search-field

如何在我的页面中使用这个新的 AppBar 而不是旧的？

【问题讨论】：

让我了解一下，您有 2 个 AppBar（新旧）并且您想要一种以编程方式在 AppBar 之间切换的方法？
是的。让我解释。我正在使用 react-admin，这里有一个默认的 AppBar。现在我希望像上面提到的那样更改这个 AppBar 链接知道这样。所以我创建了新的 AppBar 组件，现在我不知道如何完全按照你说的方式集成到布局中。

标签： javascript node.js reactjs

【解决方案1】：

要自定义react-admin 的appBar，您应该以这种方式覆盖layout 属性：

// in src/App.js
import MyLayout from './MyLayout';

const App = () => (
    <Admin layout={MyLayout} ...>
        // ...
    </Admin>
);

然后：

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

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

export default MyLayout;

最后，在src/MyAppBar.js 中，您可以使用app-bar-with-a-primary-search-field。就是这样。

更多信息，您可以查看documentation。

【讨论】：