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

Question

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

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

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

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

Answer 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。