React和Materialui-GridLayout使用纸张

Question

import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/styles';
import { Paper } from 'material-ui';
import React from 'react';
import GridLayout from 'react-grid-layout';

const useStyles = makeStyles(theme => ({
    root: {
        padding: theme.spacing(3,2),
    },
}));

class Home extends React.Component {


    render() {
        var layout = [
            {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
            {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
            {i: 'c', x: 4, y: 0, w: 1, h: 2}
        ];

        const { classes } = this.props;

        return (
            <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
                <Paper className={classes.root}>
                    <Typography key="a" variant="h5" component="h3">
                        This is a set of paper!
                    </Typography>
                </Paper>
                <Paper className={classes.root}>
                    <Typography key="b" variant="h5" component="h3">
                        This is a set of paper!
                    </Typography>
                </Paper>
                <Paper className={classes.root}>
                    <Typography key="c" variant="h5" component="h3">
                        This is a set of paper! 
                    </Typography>
                </Paper>
            </GridLayout>
        );
    }


    /* 
    <MapContainer latitude={31.97973975} longitude={34.74769792490634}/>
    */
}

export default withStyles(useStyles)(Home);

import { MuiThemeProvider } from 'material-ui/styles';
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Home from './pages/Home';

class App extends React.Component {

    render() {
        return (
            <MuiThemeProvider>
                <Router>
                    <Route path="/" component={Home}/>
                </Router>
            </MuiThemeProvider>
        );
    }
}

export default App;

  "dependencies": {
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "google-maps-react": "^2.0.2",
    "mobx": "^5.15.0",
    "prop-types": "^15.7.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-google-maps": "^9.4.5",
    "react-grid-layout": "^0.17.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"

Answer 1

您可以在Material-UI文档(https://Material-UI.com/get-started/installation/#npm)中找到以下内容：

请注意，react>=16.8.0和react-dom>=16.8.0是对等依赖关系。

Material-UI v4依赖于React钩子和上下文--这两者都不在React15中（在您的依赖项中显示）。