Компонент React Admin Layout с нуля - PullRequest
0 голосов
/ 05 декабря 2018

Я хочу реализовать настроенный макет для реакции-администратора.Я пытался использовать их документацию '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)

Буду признателен, если вы поможете мне в этом деле.

1 Ответ

0 голосов
/ 05 декабря 2018

Я не вижу ничего плохого в этом примере кода.Это действительно способ настроить макет.Есть ли у вас какие-либо проблемы с этим?

Можете ли вы открыть проблему в репозитории response-admin по поводу неработающей ссылки на документацию?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...