保证金顶部没有影响

Question

对于下面的代码

import {
  TextField,
  Stack,
  Button,
  Box,
  Grid,
  SvgIcon,
  Typography,
  Divider,
  Link
} from "@mui/material";
// import IconGoogle from "../client/images/google.svg";

export default function Home() {
  return (
    <Grid container justifyContent="center" padding={20}>
      <Grid item>
        <Stack spacing={2} width={320}>
          <Typography component="label" variant="h5" alignSelf="center">
            Sign In
          </Typography>

          <Button variant="outlined" fullwidth>
            {/* <IconGoogle /> */}
            &nbsp; Sign in to Google
          </Button>
          <Divider> OR </Divider>
          <TextField variant="outlined" label="Email" fullwidth />
          <Stack>
            <TextField variant="outlined" label="Password" fullwidth />
            <Typography
              component="label"
              variant="subtitle1"
              sx={{ color: "gray", fontSize: 12 }}
            >
              Minimum 6 Character
            </Typography>
          </Stack>
          <Button variant="contained">Sign In</Button>

          <Link component="button" underline="none" sx={{ mt: 100 }}>
            Forgot Password
          </Link>
        </Stack>
      </Grid>
    </Grid>
  );
}

它给出以下屏幕

我希望红色矩形部分大得多，因为我设置了 sx={{ mt: 100 }}。为什么没有变大，如何改正？

Answer 1

如果您使用填充而不是边距，它确实会向下移动按钮。

<Link component="button" underline="none" sx={{ pt: 100}}>
        Forgot Password
</Link>

保证金顶部没有影响

Margin top has no effect

material-ui