使用Material-UI布局系统中提供的Flexbox布局

Flexbox布局使得在Material-UI和React中使用绝对定位变得不必要，以下是一个例子：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
    backgroundColor: theme.palette.primary.main,
  },
  content: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '80%',
    height: '80%',
    backgroundColor: theme.palette.secondary.main,
    borderRadius: theme.spacing(3),
    padding: theme.spacing(2),
  },
  item: {
    flexBasis: '50%',
    width: '50%',
    height: '50%',
    backgroundColor: theme.palette.background.paper,
    borderRadius: theme.spacing(2),
    margin: theme.spacing(1),
    padding: theme.spacing(2),
  },
}));

function App() {
  const classes = useStyles();
  return (
    

      
        A
        B
        C
        D
      
    
  );
}

export default App;

在上述代码中，我们使用Material-UI提供的Grid组件，将内容放在一个div中的Flexbox容器中，并使用Grid来设置具体布局。通过使用Flexbox容器和Grid组件，我们可以轻松地实现自适应布局和动态布局，而无需使用绝对定位。

通过使用Flexbox布局和Material-UI的Grid组件，您可以摆脱使用