material UI 中的纸张组件溢出背景图像

Question

我已将 Grid 组件设置为在 small/medium 屏幕上占用 6 个，这样它们并排放置，在 xs 屏幕上占用 12 个，这样每个项目都会 .我在计算机视图中没有遇到问题，但由于某种原因，当我检查我网站的移动视图时，纸张组件溢出到底部的背景图像之外。 *更新看来问题是我给纸张组件填充了 5。有没有更好的方法让我的文本 space 围绕它？有人对此有解决方案吗？

import Grid from '@mui/material/Grid';
import React from 'react'
import bitMoji from "../images/bitMoji.png"
import Container from '@mui/material/Container'
import Box from '@mui/material/Box'
import { Typography } from '@mui/material';
import Paper from '@mui/material/Paper';



function About() {
    return (
        <Container maxWidth="md">

            <Grid marginTop={10} container space={2}>

                <Grid item xs={12} sm={6} md={6}>
                    <img style={{
                        maxWidth: '100%',
                        height: 'auto'
                    }} src={bitMoji} alt="" />

                </Grid>

                <Grid xs={12} sm={6} md={6}>


                    <Paper sx={{
                        padding: 5
                    }} elevation={10}>
                        <Typography variant="p" component="p">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Quasi, sed beatae. Laboriosam perspiciatis molestiae delectus deleniti! Explicabo 
inventore eius ad veniam rem illo architecto ut, numquam atque officia et quae?
                        </Typography> </Paper>





                </Grid>
            </Grid>

        </Container>
     )
}

export default About

App.css


  height: 100vh;
  overscroll-behavior: none;
  scroll-behavior: smooth;


  
  background-repeat: no-repeat;
  background-image: url('https://images.unsplash.com/photo-1557128928-66e3009291b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');

}```

Answer 1

看起来是新手解决方案，但问题是我最初使用的背景图像分辨率太小，无法适应 100vh

material UI 中的纸张组件溢出背景图像

Paper Component in material UI is overflowing out of background image

html

javascript

css

reactjs

material-ui