如何让React + MUI组件移动响应？

Question

我有一个使用 Material-UI (MUI) 创建的 React 组件，我正在尝试使其具有移动响应能力。目前，它看起来像这样：

但我希望它看起来像这样

以下是该组件的相关代码：

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
      display="flex"
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
      height="100vh"
    >
      <Paper elevation={3}
        style={{
          padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center', height: '980px', width: '955px',
        }}>
        <Typography variant="h5" gutterBottom style={{ textAlign: 'center' }}>
          {title}
        </Typography>
        <Avatar alt={title} src={imageUrl} style={{ marginTop: '16px' }} />
        <Box style={{ marginTop: '16px' }}>
          <Typography variant="body1">Car Info:</Typography>
          {/* Add additional car information here */}
        </Box>
        <Box style={{ marginTop: '16px' }}>
          <Typography variant="body1">Rating:</Typography>
          <Rating value={rating} readOnly />
        </Box>
        <Box style={{ marginTop: '16px' }}>
        </Box>
      </Paper>
    </Box>
  );
};

export default CarInfo;

我尝试了很多不同的方法，但在实现所需的移动响应能力方面面临着挑战。有人可以提供有关如何构建样式或任何特定于 MUI 的注意事项以实现所需的移动布局的指导吗？

我昨天问了同样的问题，但我没有找到解决方案，这是非常紧急的任务！

我真的希望你能帮助我！

Answer 1

首先，尽可能避免使用内联CSS！ 我看了一下 MUI，我认为你必须使用 xs 或 md 设置其属性，说明在哪种屏幕尺寸上应该占用多少空间元素，例如：

const MyComponent = () => {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} md={6}>
        <Paper>Content 1</Paper>
      </Grid>
      <Grid item xs={12} md={6}>
        <Paper>Content 2</Paper>
      </Grid>
    </Grid>
  );
};

在此示例中，xs={12} 表示组件将在小屏幕 (xs) 上占据整个宽度，md={6} 表示在中型屏幕及更大屏幕 (md) 上，组件将占据整个宽度可用宽度的一半。

虽然 Material-UI 提供了响应性工具，但最终取决于开发人员根据应用程序的特定需求实施响应式设计策略。

希望它对您有所帮助或至少给您带来见解！