如何设置Material UI Link组件的样式与定位？

问题1：链接无法居右 #

你在Grid item上设置的justify="flex-end"不生效，原因是Grid item默认不是flex容器，需要给它添加display="flex"和justifyContent="flex-end"，或者直接给内部Typography设置textAlign="right"来实现居右效果。

问题2：颜色设置无效 #

当Typography的component指定为Link时，Link的默认样式会覆盖Typography的color属性，需要通过sx或style属性直接给元素指定颜色。

修改后的代码示例 #

{/* Password */}
<Grid container mt={4}>
  <Grid item xs={6} display="flex" justifyContent="flex-start">
    <Typography 
      variant="h9" 
      gutterBottom 
      component="div"
      style={{ fontWeight: "bold" }} 
    >
      Password
    </Typography>
  </Grid>

  <Grid item xs={6} display="flex" justifyContent="flex-end">
    <Typography
      variant="body2"
      gutterBottom
      component={Link}
      to="/register"
      sx={{ color: "black" }} // 也可以用 style={{ color: "black" }}
    >
      Forget Password?
    </Typography>
  </Grid>
</Grid>

简化写法（直接给Typography设置对齐） #

{/* Password */}
<Grid container mt={4}>
  <Grid item xs={6}>
    <Typography 
      variant="h9" 
      gutterBottom 
      component="div"
      style={{ fontWeight: "bold", textAlign: "left" }} 
    >
      Password
    </Typography>
  </Grid>

  <Grid item xs={6}>
    <Typography
      variant="body2"
      gutterBottom
      component={Link}
      to="/register"
      style={{ textAlign: "right", color: "black" }}
    >
      Forget Password?
    </Typography>
  </Grid>
</Grid>

内容的提问来源于stack exchange，提问作者sultan.h