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

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

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

我想像下面提到的链接一样使用新的 appBar。

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

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

解决方法

要自定义 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。