从头开始反应管理布局组件

Question

我想为 react-admin 实现自定义布局。我尝试使用他们的文档'https://marmelab.com/react-admin/Theming.html#using-a-custom-layout' 但它效果不佳（例如，我们的组件中没有theme）。文档中有一个断开的链接说您可以使用它进行自定义:(。

我现在已经实现了一些现在可以正常工作的东西，但我不知道在项目结束之前完全没有问题/副作用。

import * as React from 'react'
import { MuiThemeProvider, withStyles, createStyles} from '@material-ui/core/styles'
import appTheme from '../config/Theme'
import AppBar from './AppBar'
import Navbar from './Navbar'

const styles = (theme: any) => createStyles({
  appFrame: {
    display: 'flex',
    flexDirection: 'column',
    overflowX: 'auto',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    flexGrow: 2,
    marginTop: '4em',
    padding: theme.spacing.unit * 3,
    paddingLeft: 5,
  },
  contentNoSidebar: {
    display: 'flex',
    flexGrow: 1,
  },
  root: {
    backgroundColor: theme.palette.background.default,
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100vh',
    position: 'relative',
    zIndex: 1,
  },
})

class CustomLayout extends React.Component<any, any> {
  public render () {
    const {
      children,
      classes,
      logout,
      open,
      title,
    } = this.props
    return (
      <MuiThemeProvider theme={appTheme}>
        <div className={classes.root}>
          <div className={classes.appFrame}>
            <AppBar title={title} open={open} logout={logout} />
            <Navbar/>
            <main className={classes.contentNoSidebar}>
                <div className={classes.content}>
                    {children}
                </div>
            </main>
          </div>
        </div>
      </MuiThemeProvider>
    )
  }
}
export default withStyles(styles)(CustomLayout)

如果您能在这种情况下帮助我，我将不胜感激。

Answer 1

我认为此代码示例没有任何问题。这确实是自定义布局的方法。你有什么问题吗？

你能在 react-admin 存储库上打开一个关于文档断开链接的问题吗？