如何使MUI Skeleton元素实现宽度响应式？

你遇到的核心问题是Skeleton组件使用了固定像素值的width/height，容器的响应式特性无法传递给固定尺寸的子组件。以下是针对性的优化方案和代码实现：

核心优化思路 #

• 替换固定像素尺寸为百分比、相对单位或动态值
• 用MUI自带的响应式布局组件（Grid）替代手动inline-flex布局
• 移除容器的固定高度限制，让布局随内容和屏幕自适应
• 针对不同断点动态调整组件尺寸与排列方式

优化后的完整代码 #

import { Grid, Skeleton, useMediaQuery, Theme } from '@mui/material';

const ResponsiveSkeletonContainer = () => {
  // 检测是否为移动端屏幕
  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));

  return (
    <div
      style={{
        minHeight: "2165px", // 替换固定height为min-height，保留最小高度同时支持自适应
        maxWidth: "1082px",
        width: "100%", // 确保容器占满可用宽度
        background: "white",
        padding: "24px",
        borderRadius: "15px",
        marginBottom: "46px",
        margin: "0 auto", // 容器水平居中
      }}
    >
      {/* 顶部三个Skeleton：移动端垂直排列，桌面端三列分布 */}
      <Grid container spacing={2} mb={3}>
        {[1,2,3].map((item) => (
          <Grid item xs={12} sm={4} key={item}>
            <Skeleton
              variant="rectangular"
              width="100%"
              height={48}
              sx={{ borderRadius: "10px" }}
            />
          </Grid>
        ))}
      </Grid>

      <Skeleton
        variant="text"
        width={isMobile ? "60%" : 100}
        height={25}
        sx={{ borderRadius: "5px", mb: 2 }}
      />

      <div style={{ paddingTop: "20px" }}>
        {/* 标签组：自动换行，自适应排列 */}
        <Grid container spacing={1} mb={4}>
          {[1,2,3,4,5].map((item) => (
            <Grid item key={item}>
              <Grid container alignItems="center" spacing={1}>
                <Grid item>
                  <Skeleton variant="circular" width={20} height={20} />
                </Grid>
                <Grid item>
                  <Skeleton variant="text" width={isMobile ? "80px" : 100} height={20} />
                </Grid>
              </Grid>
            </Grid>
          ))}
        </Grid>

        <Skeleton
          variant="rectangular"
          width={isMobile ? "100%" : 240}
          height={48}
          sx={{ borderRadius: "10px", mb: 3 }}
        />

        <Skeleton
          variant="text"
          width={isMobile ? "70%" : 110}
          height={27}
          sx={{ borderRadius: "10px", mb: 2 }}
        />

        {/* 宽屏骨架：填满容器宽度 */}
        <Skeleton
          variant="rectangular"
          width="100%"
          height={300}
          sx={{ marginTop: "20px", borderRadius: "12px", mb: 4 }}
        />

        <Skeleton
          variant="rectangular"
          width={isMobile ? "100%" : 460}
          height={48}
          sx={{ borderRadius: "10px", mb: 3 }}
        />

        <Skeleton
          variant="text"
          width={isMobile ? "50%" : 80}
          height={30}
          sx={{ borderRadius: "10px", mb: 2 }}
        />

        <Skeleton
          variant="rectangular"
          width={isMobile ? "100%" : 180}
          height={50}
          sx={{ borderRadius: "10px", mb: 4 }}
        />

        <Skeleton
          variant="text"
          width={isMobile ? "80%" : 130}
          height={30}
          sx={{ borderRadius: "10px", mb: 3 }}
        />

        {/* 头像文本组：移动端垂直排列，桌面端水平对齐 */}
        <Grid container spacing={2} mb={4} alignItems="center">
          <Grid item>
            <Skeleton variant="circular" width={157} height={157} sx={{ borderRadius: "157px" }} />
          </Grid>
          <Grid item xs={12} sm>
            <Skeleton variant="text" width="100%" height={30} sx={{ mb: 3 }} />
            <Grid container spacing={1}>
              <Grid item xs={8}>
                <Skeleton variant="rectangular" width="100%" height={54} sx={{ borderRadius: "10px" }} />
              </Grid>
              <Grid item xs={4}>
                <Skeleton variant="rectangular" width="100%" height={50} sx={{ borderRadius: "10px" }} />
              </Grid>
            </Grid>
          </Grid>
        </Grid>

        <Skeleton
          variant="rectangular"
          width="100%"
          height={300}
          sx={{ borderRadius: "12px", mb: 3 }}
        />
        <Skeleton
          variant="rectangular"
          width="100%"
          height={300}
          sx={{ borderRadius: "12px" }}
        />
      </div>
    </div>
  );
};

export default ResponsiveSkeletonContainer;

关键改进说明 #

1. 响应式尺寸控制：用useMediaQuery检测屏幕断点，动态调整Skeleton的宽度，移动端优先占满可用空间
2. Grid布局替代手动flex：MUI Grid自带xs/sm等断点配置，自动处理不同屏幕下的排列方式，无需手动写margin和换行逻辑
3. 移除固定高度：容器改用min-height，既保留原有布局的最小高度，又支持内容和屏幕尺寸变化时的自适应
4. 规范间距管理：用MUI的sx属性（如mb:3）替代冗余的<br />标签，布局更易维护
5. 组件类型优化：将文本类Skeleton的variant="Text"改为variant="rectangular"，更符合视觉表现，也更适配百分比宽度

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