Material UI React Box组件小屏幕横向溢出导致滚动问题求助

问题原因分析 #

• Box设置了borderWidth:15，但默认盒模型为content-box，边框会额外占用宽度，导致xs屏幕下总宽度超过设备视口（350+30=380 > 360）
• 大字号Typography文本在小屏幕未做换行处理，可能超出容器
• FormControl固定宽度26ch在窄屏场景下易超出容器范围

具体修复方案 #

1. 给Box添加盒模型适配 #

在Box的sx配置中加入boxSizing: 'border-box'，让边框宽度包含在maxWidth的计算范围内：

<Box
    sx={{
        maxWidth: { xs: 350, sm: 480, md: 600, lg: 800},
        boxSizing: 'border-box', // 新增：边框计入元素总宽度
        borderWidth: 15,
        borderStyle: 'solid',
        borderColor: 'background.paper',
        borderRadius: 4,
        boxShadow: 8,
        backgroundColor: 'background.paper',
        '&:hover': {
            backgroundColor: 'background.paper',
            opacity: [0.98, 0.93, 0.9],
        },
    }}
>

2. 优化文本换行与响应式字号 #

给大字号Typography添加强制换行属性，同时针对小屏幕调整字号：

<Typography 
    variant={{ xs: "h5", sm: "h4" }} // 小屏幕用更小字号
    sx={{fontWeight: 700, wordBreak: 'break-word'}} // 强制文本换行
>
    Enter the name you'd like to look up 📝
</Typography>

// 底部品牌文本同步调整
<Typography 
    variant={{ xs: "h4", sm: "h3" }} 
    sx={{fontWeight: 800, paddingTop : 5, wordBreak: 'break-word'}}
>
    Vinu<Typography display="inline" variant={{ xs: "h4", sm: "h3" }} sx={{fontWeight: 800, color: '#006aff'}}>Pay 🎉</Typography>
</Typography>

3. 调整表单控件的响应式宽度 #

将FormControl的固定宽度改为响应式配置，窄屏下占满容器宽度：

<FormControl sx={{ m: 2, width: { xs: '100%', sm: '26ch' } }} variant="outlined">

验证效果 #

修改完成后，在Galaxy S8+（360x740）等小屏幕设备上，Box组件的总宽度会被控制在视口范围内，不会再出现横向溢出和滚动条问题。

内容的提问来源于stack exchange，提问作者mikolll