如何在 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

使用系統屬性很簡單。

    <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>
  );
}

Answer 3

您可以添加text-align: center; 像這樣的Box標簽：

 <Box
   style={{
    backgroundColor:"rgb(234, 237, 242)";
    textAlign: "center";
   }}
 >