如何在反应中对齐material-ui中的网格项目中心？

Question

我有一个 maxWidth 的网格元素，以便在大屏幕上显示时具有水平边距。我希望网格元素居中，并且长段落应与左侧对齐。你会怎么做？我正在使用 MUI v5。谢谢。

 <Box
      style={{
        backgroundColor:"rgb(234, 237, 242)"
      }}      
    >
      <Grid container alignItems='center' justifyContent='center' maxWidth='md'>
        <Grid item xs={12} md={12} justifyContent="center">   
            <Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{mb:4}}>
              Nice title
          </Typography>
            <Typography sx={{ px: 4 }} paragraph>very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line.</Typography>
          </Grid>
        </Grid> 
    </Box>

Answer 1

使用system properties 很简单。

    <Box
      display="flex"
      justifyContent="center"
      style={{
        backgroundColor:"rgb(234, 237, 242)"
      }}
    >
      ...

Answer 2

你可以试试下面的代码。我检查了这段代码，它运行良好。

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

const Item = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
  return (
    <Box sx={{ flexGrow: 1, backgroundColor: 'rgb(234, 237, 242)' }}>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Item>
            <Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{ mb: 4 }}>
              Hello
            </Typography>
            <Typography align="center" sx={{ px: 4 }} paragraph>
              very very long line
            </Typography>
          </Item>
        </Grid>
      </Grid>
    </Box>
  );
}