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