屏幕缩小时NavPanel内BackToButton与SearchTextField重叠问题求解

你的问题核心是当前样式强制了不换行布局，同时缺少响应式断点控制，导致小屏幕下元素挤压重叠。可以通过以下几步修改解决：

关键修改点 #

• 移除flexWrap: 'nowrap'，改为flexWrap: 'wrap'，允许容器内元素换行
• 删除whiteSpace: 'nowrap'，避免文本/元素强制不折行
• 给两个子组件添加响应式宽度配置，让小屏幕下各自占满整行

修改后的完整代码 #

const Style = {
    paddingLeft: '8%',
    paddingRight: '8%',
    minHeight: '70px',
    alignItems: 'center',
    flexWrap: 'wrap', // 允许元素换行
    gap: 2, // 添加元素间距，提升布局美观度（可选，按需调整）
}

export default function NavPanel() {
    return (
        <Grid container sx={Style}>
            {/* xs={12} 表示最小屏幕下占满整行，md='auto' 中等屏幕宽度自适应 */}
            <Grid item xs={12} md='auto'>
                <BackToButton />
            </Grid>
            <Grid item xs={12} md='auto'>
                <SearchTextField />
            </Grid>
        </Grid>
    );
}

补充说明 #

• xs={12}是MUI Grid的断点属性：当屏幕宽度小于600px（xs断点）时，子元素会占据12列（整行宽度），自动换行到下方
• md='auto'保证中等及以上屏幕（≥900px）时，子元素宽度自适应，维持横向排列的原有布局
• gap属性会给子元素之间设置统一间距，无论横向还是纵向布局都更协调，可根据设计需求调整数值

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