如何让React + MUI组件实现移动端响应式布局？

修改后的组件代码 #

import React from 'react';
import {
  Box, Typography, Paper, Rating, Avatar,
} from '@mui/material';

type CarInfoProps = {
  title: string;
  imageUrl: string;
  rating: number;
  comments: string[];
};

const CarInfo: React.FC<CarInfoProps> = ({
  title, imageUrl, rating, comments,
}) => {
  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: { xs: '16px', sm: 0 },
      }}
    >
      <Paper 
        elevation={3}
        sx={{
          padding: { xs: '12px', sm: '16px' },
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          width: { xs: '100%', sm: '955px' },
          maxWidth: '100%',
          height: { xs: 'auto', sm: '980px' },
          gap: '16px',
        }}
      >
        <Typography variant="h5" gutterBottom sx={{ textAlign: 'center', fontSize: { xs: '1.25rem', sm: '1.5rem' } }}>
          {title}
        </Typography>
        <Avatar 
          alt={title} 
          src={imageUrl} 
          sx={{ width: { xs: 80, sm: 100 }, height: { xs: 80, sm: 100 } }}
        />
        <Box>
          <Typography variant="body1">Car Info:</Typography>
          {/* Add additional car information here */}
        </Box>
        <Box>
          <Typography variant="body1">Rating:</Typography>
          <Rating value={rating} readOnly />
        </Box>
      </Paper>
    </Box>
  );
};

export default CarInfo;

关键调整要点 #

• 移除固定尺寸：将Paper的固定width/height替换为MUI断点配置，移动端(xs)下宽度占满容器、高度自适应，大屏(sm)保留原固定尺寸。
• 替换内联style为sx属性：sx支持响应式断点语法，能便捷针对不同屏幕设置样式，符合MUI设计规范。
• 添加移动端内边距：外层Box在移动端添加水平内边距，避免内容紧贴屏幕边缘；Paper内边距随屏幕尺寸调整，保证移动端布局紧凑。
• 统一间距管理：用gap属性替代重复的marginTop，让组件内间距更易维护。
• 响应式元素缩放：针对移动端缩小标题字号和头像尺寸，适配小屏显示需求。

MUI响应式适配核心要点 #

1. 断点运用：MUI默认断点为xs(<600px)、sm(≥600px)、md(≥900px)等，通过sx的对象语法可给不同断点设置差异化样式。
2. 避免固定像素值：优先使用百分比、maxWidth/minHeight等相对单位，确保组件在不同屏幕下自适应。
3. 容器边距适配：外层容器添加适当内边距，防止移动端内容溢出或贴边。
4. 元素尺寸适配：根据屏幕大小调整字体、图标、图片等元素尺寸，保证移动端的可读性和布局合理性。

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