[英]Paper Component in material UI is overflowing out of background image
I have set the Grid component to take up 6 on small/medium screens so that they are side by side and 12 on xs screens so each item would.我已将 Grid 组件设置为在小型/中型屏幕上占用 6 个,以便它们并排放置,在 xs 屏幕上占用 12 个,这样每个项目都会。 I am not having trouble in the computer view but for some reason when I check the mobile view of my website the paper component is overflowing outside of the background image at the bottom.我在计算机视图中没有遇到问题,但由于某种原因,当我检查我网站的移动视图时,纸张组件溢出到底部的背景图像之外。 *UPDATE It seems that the problem is that I am giving the paper component a padding of 5. Is there a better way to give my text space around it? *更新看来问题是我给纸张组件填充了 5。有没有更好的方法在它周围给我的文本空间? Does anyone have a solution to this?有人对此有解决方案吗?
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申请.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');
}```
Seems like a novice solution, but the problem was that the background image I had originally used had too small of a resolution to fit 100vh似乎是新手解决方案,但问题是我最初使用的背景图像分辨率太小,无法适应 100vh
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.