剛剛開始使用@mui/ material的新項目。我有一個基本的應用程序結構，正在創建一個登錄頁面。我試圖添加一個背景圖片，我注意到我的身體不是100%的高度和寬度。用于包含登錄的容器組件有一個marginTop: 8，它將主體向下移動這個量，所有其他組件？有什么我不明白的嗎？我通常設置我的身體& amp根覆蓋100%，但我猜這不是mui的標準。我到底做錯了什么？當給子元素添加邊距時，我該如何正確定位元素呢？

登錄組件

const Login = () => {
    return (
        <Container
            maxWidth="xs"
            sx={{
                mt: 8,
            }}
        >
            <Paper
                elevation={3}
                sx={{ padding: 3, display: 'flex', flexDirection: 'column', alignItems: 'center' }}
            >
                <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
                    <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                    Sign in
                </Typography>
                <Box component="form" sx={{ mt: 1 }}>
                    <TextField
                        margin="normal"
                        required
                        fullWidth
                        id="username"
                        label="Username"
                        name="username"
                        autoComplete="username"
                        autoFocus
                    />
                    <TextField
                        margin="normal"
                        required
                        fullWidth
                        name="password"
                        label="Password"
                        type="password"
                        id="password"
                        autoComplete="current-password"
                    />
                    <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
                        Sign In
                    </Button>
                    <Box
                        sx={{
                            display: 'flex',
                            justifyContent: 'center',
                        }}
                    >
                        <Link href="https://www.hunterliberty.com/contact-us">Contact Us</Link>
                    </Box>
                </Box>
            </Paper>
        </Container>
    );
};

App.tsx

function App() {
    return (
        <Container maxWidth={false}>
            <Login />
        </Container>
    );
}

index.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100vw;
    height: 100vh;
}

#bg-image {
    background-image: url(../static/pexels-pixabay-158827.jpg);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    width: 100vw;
}

#root {
    height: 100%;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

形象