Material UI Grid包裹Link设置xs={12}时居中失效该如何排查？

问题定位方法 #

• 用浏览器开发者工具的「计算样式」面板，对比本地和可复现 demo 中<Grid item xs={12}元素的width、text-align、display属性，看是否有额外的样式覆盖。
• 开启样式面板的「显示所有继承规则」，排查是否有全局样式命中了.MuiGrid-item、[class*="MuiGrid-xs-12"]这类选择器，修改了默认布局属性。
• 临时给问题Grid item添加inline样式style={{textAlign: 'center'}}，如果生效说明父元素文本对齐属性被覆盖，不生效则检查Link组件的display属性是否为非inline类型。

需要排查的代码范围 #

1. MUI 全局主题配置：检查createTheme定义中是否自定义了MuiGrid组件的默认样式，比如给item属性、xs断点规则添加了额外的布局配置。
2. 全局样式文件：排查项目根路径的全局CSS/LESS/SCSS文件，是否有对Grid类名、通用div元素设置了text-align: left这类全局规则。
3. 依赖版本差异：确认本地安装的@material-ui/core版本和可复现demo的版本是否一致，MUI v4不同子版本的Grid组件默认样式存在差异。
4. Grid 二次封装逻辑：检查项目中是否对MUI Grid做了二次封装，是否有高阶组件给Grid item默认注入了额外样式。

临时修复方案 #

你可以任选以下方案快速解决问题：

1. 给Grid item添加textAlign属性

<Grid item xs={12} textAlign="center">
  <Link component={RouterLink} to="/sendemail" variant="h5">
    Send emails to new applicants →
  </Link>
</Grid>

2. 用Typography包裹Link组件，复用Typography的align属性

<Grid item xs={12}>
  <Typography variant="h5" align="center">
    <Link component={RouterLink} to="/sendemail">
      Send emails to new applicants →
    </Link>
  </Typography>

3. 给Link组件添加block布局属性

<Link
  component={RouterLink}
  to="/sendemail"
  variant="h5"
  sx={{ display: 'block', textAlign: 'center' }}
>
  Send emails to new applicants →
</Link>

内容的提问来源于stack exchange，提问作者Leonard