css - 网格项“链接”未按预期居中

Question

这是一个使用 Material UI 的 TypeScript React 项目。我想将链接组件与此处复制"Send emails to new applicants →"的文本一样居中。

但是，在我的本地代码库中，相同的代码会像下面这样居中中断。

我也意识到了一个奇怪的行为。对于我的组件Grid周围的 item 元素的属性，Link

居中中断时： <Grid item xs={12}>

居中在以下情况下起作用：<Grid item>

这一定意味着我的代码的另一部分正在阻止该项目居中。

所以我检查了以下内容，

1. 我当前页面的样式表与布局无关。
2. <WrapperPage>不包含任何样式

但是我应该检查代码中的其他地方吗？有什么推荐的方法吗？

这是一个使用 Material UI 的 TypeScript React 项目。Link组件来自 Material UI，来自RouterLinkReact Router。

实际代码是这样的。

SubmittedApplications.tsx

import { Box, Card, Grid, Typography, Link } from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";
...
    <WrapperPage>
      <Grid container justifyContent="center" spacing={2}>
        <Grid item xs={12}>
          <Typography variant="h3" align="center">
            Submitted Applications
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <Link
            component={RouterLink}
            to="/sendemail"
            variant="h5"
            align="center"
          >
            Send emails to new applicants →
          </Link>
        </Grid>
      </Grid>
    ...
    </WrapperPage>

Edit1: Codesandbox 的 Link 组件和 local 有相似的属性...

Edit2：计算截图

Edit3：父网格元素比较

标签： cssreactjsreact-routermaterial-ui