React+MUI汽车信息组件移动端响应式适配求助

问题描述 #

我有一个使用Material-UI（MUI）开发的React汽车信息组件，正尝试实现移动端响应式布局。

• 当前移动端布局效果：
• 期望达到的效果：

组件原代码如下：

import React from 'react';
import {
  Box, Paper, useMediaQuery, useTheme, Typography, Grid, Container, Accordion, AccordionSummary, AccordionDetails, Rating,
} from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Link } from 'react-router-dom';
import LocationOnIcon from './SVGiCON';


export const CarInfo: React.FC = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  const [state, setState] = React.useState({
    gilad: false,
    jason: false,
    antoine: false,
  });

  const [expanded, setExpanded] = React.useState(false);
  const [ratings, setRatings] = React.useState<number[]>([4, 5, 3, 4.5]);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,
      [event.target.name]: event.target.checked,
    });
  };

  const handleExpandToggle = () => {
    setExpanded(!expanded);
  };

  const { gilad, jason, antoine } = state;
  const [value, setValue] = React.useState<number | null>(2);


  return (
    <Container>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        minHeight="100vh"
        py={4}
      >
        <Paper
          elevation={3}
          sx={{
            p: 3,
            borderRadius: 2,
            textAlign: 'center',
            maxWidth: 'xl',
            width: '100%',
            backgroundColor: 'grey !important',
            minHeight: '1000px',
          }}
        >
          {/* Car Title */}
          <Typography variant="h4" gutterBottom color={'white'}>
            Car Title
          </Typography>

          <Grid container spacing={2} alignItems="center" justifyContent="center">
            {/* 移动端将图片放在上方 */}
            <Grid item xs={12} md={6} sx={{ order: { xs: 1, md: 2 } }}>
              <img 
                src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 
                alt="Car" 
                style={{ maxWidth: '100%', height: 'auto' }} 
              />
            </Grid>

            <Grid item xs={12} md={6} sx={{ order: { xs: 2, md: 1 }, textAlign: 'left' }}>
              <Typography variant="body1">
                Собственик{' '}
                <Link to="/home" style={{ textDecoration: 'none', marginLeft: '10px' }}>
                  <span style={{
                    color: 'black', backgroundColor: 'green', borderRadius: '50px', padding: '10px',
                  }}>
                    Александър Иванов
                  </span>
                </Link>
              </Typography>

              <Typography variant="body1" sx={{ ml: { xs: 1, md: 3 }, mt: 2, mb: 2 }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                Костинброд, София-област
              </Typography>

              <Typography variant="body1" sx={{ ml: { xs: 1, md: 3 } }}>
                Детайли за колата:
              </Typography>

              <Typography variant="body1" sx={{ ml: { xs: 1, md: 3 } }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                Бензин
              </Typography>

              <Typography variant="body1" sx={{ ml: { xs: 1, md: 3 } }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                Черен
              </Typography>

              <Typography variant="body1" sx={{ ml: { xs: 1, md: 3 } }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                2022 г.
              </Typography>

              <Typography variant="body1" sx={{ ml: { xs: 1, md: 3 } }}>
                <LocationOnIcon style={{ marginRight: '10px', width: '15px', height: '15px' }} />
                90 000 км
              </Typography>

              <FormGroup sx={{ ml: { xs: 1, md: 3 }, mt: 1 }}>
                <FormControlLabel
                  style={{ marginBottom: '-10px', color: "black" }}
                  control={
                    <Checkbox
                      checked={gilad}
                      onChange={handleChange}
                      name="gilad"
                      size='small'
                      style={{ color: 'black' }} />
                  }
                  label="Реален пробег"
                />
                <FormControlLabel
                  style={{ color: "black" }}
                  control={
                    <Checkbox checked={jason}
                      onChange={handleChange}
                      name="jason"
                      size='small'
                      style={{ color: 'black' }} />
                  }
                  label="Първи собственик"
                />
              </FormGroup>
            </Grid>
          </Grid>

          <Typography variant="body1" align="left" sx={{ ml: { xs: 1, md: 3 }, mt: 4 }}>
            Лиценз
          </Typography>

          <Grid container spacing={2} alignItems="flex-start" justifyContent="center">
            <Grid item xs={12} md={6}>
              <Box sx={{ mt: 2, ml: { xs: 0, md: 3 } }}>
                <img 
                  src="https://images.pexels.com/photos/533669/pexels-photo-533669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                  alt="License" 
                  style={{ maxWidth: '100%', height: 'auto' }} 
                />
              </Box>
            </Grid>

            <Grid item xs={12} md={6} sx={{ textAlign: 'left' }}>
              <Typography variant="body1" sx={{ mt: 2, ml: { xs: 1, md: 0 } }}>
                Линк към документа{' '}
              </Typography>

              <Typography variant="body1" sx={{ mt: 2, ml: { xs: 1, md: 0 }, wordBreak: 'break-all' }}>
                <a href="https://en.wikipedia.org/wiki/Vehicle_registration_certificate#/media/File:1917_auto_registration_license.jpg" target="_blank" rel="noopener noreferrer">
                  https://en.wikipedia.org/wiki/Vehicle_registration_certificate#/media/File:1917_auto_registration_license.jpg
                </a>
              </Typography>
            </Grid>
          </Grid>

          <Grid container spacing={2} sx={{ mt: 2 }}>
            <Grid item xs={12} md={6}>
              <Accordion 
                expanded={expanded}
                onChange={handleExpandToggle}
                sx={{
                  marginTop: 2,
                  width: '100%',
                  textAlign: 'left',
                  marginX: { xs: 1, md: 3 },
                  backgroundColor: 'transparent',
                }}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1bh-content"
                  id="panel1bh-header"
                >
                  <Typography variant="body1">Рейтинг</Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <div>
                    <Rating name="read-only" value={value} readOnly size="large" />
                  </div>
                  <div>
                    <Rating name="read-only" value={value} readOnly size="large" />
                  </div>
                </AccordionDetails>
              </Accordion>
            </Grid>

            <Grid item xs={12} md={6}>
              <Accordion 
                expanded={expanded}
                onChange={handleExpandToggle}
                sx={{
                  marginTop: 2,
                  width: '100%',
                  textAlign: 'left',
                  marginX: { xs: 1, md: 0 },
                  backgroundColor: 'transparent',
                }}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1bh-content"
                  id="panel1bh-header"
                >
                  <Typography variant="body1">Коментари</Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <div>
                    <Rating name="read-only" value={value} readOnly size="large" />
                  </div>
                  <div>
                    <Rating name="read-only" value={value} readOnly size="large" />
                  </div>
                </AccordionDetails>
              </Accordion>
            </Grid>
          </Grid>
        </Paper>
      </Box>
    </Container>
  );
};
export default CarInfo;

核心修改说明 #

• 移除固定宽高：删除Paper组件的固定width和height，改用width: '100%'和minHeight保证容器自适应
• 调整Grid顺序：通过order属性，让移动端先展示汽车图片，再显示详情
• 图片响应式处理：给图片设置maxWidth: '100%'和height: 'auto'，避免固定尺寸导致溢出
• 适配边距断点：将固定的marginLeft替换为MUI的断点属性，移动端缩小边距
• Accordion宽度自适应：移除固定宽度，让折叠面板在移动端占满容器宽度

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