React中使用MUI v5如何实现Grid元素居中且内部长段落左对齐

你需要给设置了maxWidth的Grid container添加水平自动外边距实现整体居中，原有长文本Typography默认就是左对齐，无需额外调整，修改后的完整代码如下：

<Box
  style={{
    backgroundColor:"rgb(234, 237, 242)"
  }}      
>
  {/* 新增sx={{mx: 'auto'}}实现Grid容器水平居中 */}
  <Grid container alignItems='center' justifyContent='center' maxWidth='md' sx={{mx: 'auto'}}>
    <Grid item xs={12} md={12}>   
        <Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{mb:4}}>
          Nice title
      </Typography>
        {/* 无align属性默认左对齐，符合需求 */}
        <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>

核心修改说明 #

• 给带maxWidth的Grid容器加mx: 'auto'：MUI的mx是marginX的简写，auto值会让容器在父级宽度大于自身maxWidth时，自动平分左右外边距，实现水平居中
• 原有Grid item上的justifyContent="center"是冗余属性，可以直接删除，item上该属性不生效
• 长文本Typography没有设置align属性，默认就是左对齐，标题保留align="center"即可满足样式要求

内容的提问来源于stack exchange，提问作者Wt.N