如何使所有骨架元素在宽度方面响应？

Question

我正在努力使代码中的 MUI 骨骼具有响应性。虽然容器有响应，但骨架没有正确适应。有人可以帮助我排除故障并改进代码的响应能力吗？

提前谢谢您！

<div
  style={{
    height: "2165px",
    maxWidth: "1082px",
    background: "white",
    padding: "24px",
    borderRadius: "15px",
    marginBottom: "46px",
  }}
>
  <div class="A" style={{ display: "inline-flex" }}>
    <Skeleton
      variant="Text"
      width={320}
      height={48}
      style={{ borderRadius: "10px" }}
    />
    <Skeleton
      variant="Text"
      width={320}
      height={48}
      style={{ borderRadius: "10px", marginRight: "35px" }}
    />
    <Skeleton
      variant="Text"
      width={320}
      height={48}
      style={{ borderRadius: "10px", marginRight: "35px" }}
    />
  </div>
  <br />
  <br />
  <Skeleton
    variant="Text"
    width={100}
    height={25}
    style={{ borderRadius: "5px" }}
  />
  <div style={{ paddingTop: "20px" }}>
    <div style={{ marginRight: "10px", display: "inline-flex" }}>
      <Skeleton
        variant="circular"
        width={20}
        height={20}
        style={{ borderRadius: "10px" }}
      />
      <Skeleton
        variant="Text"
        width={100}
        height={20}
        style={{ borderRadius: "5px", marginRight: "8px" }}
      />

      <Skeleton
        variant="circular"
        width={20}
        height={20}
        style={{ borderRadius: "10px", marginRight: "20px" }}
      />
      <Skeleton
        variant="Text"
        width={100}
        height={20}
        style={{ borderRadius: "5px", marginRight: "8px" }}
      />

      <Skeleton
        variant="circular"
        width={20}
        height={20}
        style={{ borderRadius: "10px", marginRight: "20px" }}
      />
      <Skeleton
        variant="Text"
        width={100}
        height={20}
        style={{ borderRadius: "5px", marginRight: "8px" }}
      />

      <Skeleton
        variant="circular"
        width={20}
        height={20}
        style={{ borderRadius: "10px", marginRight: "20px" }}
      />
      <Skeleton
        variant="Text"
        width={100}
        height={20}
        style={{ borderRadius: "5px", marginRight: "8px" }}
      />

      <Skeleton
        variant="circular"
        width={20}
        height={20}
        style={{ borderRadius: "10px", marginRight: "20px" }}
      />
      <Skeleton
        variant="Text"
        width={100}
        height={20}
        style={{ borderRadius: "5px", marginRight: "8px" }}
      />
    </div>
    <br />
    <br />
    <br />
    <Skeleton
      variant="Text"
      width={240}
      height={48}
      style={{ borderRadius: "10px" }}
    />
    <br />
    <br />
    <Skeleton
      variant="Text"
      width={110}
      height={27}
      style={{ borderRadius: "10px" }}
    />
    <br />
    <Skeleton
      variant="Text"
      width={1035}
      height={300}
      style={{ marginTop: "20px", borderRadius: "12px" }}
    />
    <br />
    <br />
    <br />
    <Skeleton
      variant="Text"
      width={460}
      height={48}
      style={{ borderRadius: "10px" }}
    />
    <br />
    <br />
    <Skeleton
      variant="Text"
      width={80}
      height={30}
      style={{ borderRadius: "10px" }}
    />
    <br />
    <Skeleton
      variant="Text"
      width={180}
      height={50}
      style={{ borderRadius: "10px", marginRight: "6px" }}
    />
    <br />
    <br />
    <br />
    <br />
    <Skeleton
      variant="Text"
      width={130}
      height={30}
      style={{ borderRadius: "10px", marginRight: "6px" }}
    />
    <br />
    <br />
    <div style={{ display: "flex" }}>
      <Skeleton
        variant="circular"
        width={157}
        height={157}
        style={{ borderRadius: "157px" }}
      />
      <Skeleton
        variant="Text"
        width={300}
        height={30}
        style={{ borderRadius: "10px", marginRight: "25px", marginTop: "20px" }}
      />
      <br />
      <Skeleton
        variant="Text"
        width={410}
        height={54}
        style={{
          borderRadius: "10px",
          marginRight: "-300px",
          marginTop: "80px",
        }}
      />
      <Skeleton
        variant="Text"
        width={100}
        height={50}
        style={{ borderRadius: "10px", marginRight: "8px", marginTop: "80px" }}
      />
    </div>
    <br />
    <br />
    <br />
    <br />
    <Skeleton
      variant="Text"
      width={1035}
      height={300}
      style={{ borderRadius: "12px" }}
    />
    <Skeleton
      variant="Text"
      width={"100%"}
      height={300}
      style={{ marginTop: "30px", borderRadius: "12px" }}
    />
  </div>
</div>;

Answer 1

如果我的回答不正确或与您的查询无关，我提前表示歉意。不过，我使用 React Loading Description，这是一个用于创建响应式骨架的优秀包。也许这会对你有帮助。