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

Question

我想为 react-admin 实现自定义布局。我尝试使用他们的文档“https://marmelab.com/react-admin/Theming.html#using-a-custom-layout” 但它并没有很好地工作（例如我们的组件中没有 theme ）。文档中有一个损坏的 link 说您可以使用它来自定义 :(.

我现在已经实现了一些现在可以正常工作的东西，但我不知道在没有 problem/side-effects 的情况下是否可以完全工作，直到项目结束。

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 存储库上提出一个关于文档损坏的问题 link 吗？

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

React Admin Layout Component From Scratch

typescript

reactjs

material-ui

react-admin