reactjs - 刷新网站时，Material UI 图标变小

Question

我为我的图标创建了一个反应元素，并有条件地设置了它的样式。我的图标应该5rem在桌面视图中，在第一次渲染时它们就在5rem里面，一切都很好，但是如果想刷新页面，它们会变小。为什么会这样？

import { Container } from "@mui/material";
import { Google, Facebook, Twitter, Anchor } from "@mui/icons-material";
import React from "react";
import useWindowSize from "../../hooks/useWindowSize";
const IconSection = () => {
  const { width } = useWindowSize();
  return (
    <Container
      sx={
        width < 768
          ? {
              display: "flex",
              justifyContent: "space-between",
              "*": { fontSize: "2rem", color: "white" },
              marginTop: "10em",
            }
          : {
              display: "flex",
              justifyContent: "space-between",
              "& > *": { fontSize: "5rem", color: "white" },
              marginTop: "20%",
            }
      }
      maxWidth={width < 768 ? "false" : "true"}
    >
      <Facebook />
      <Twitter />
      <Google />
      <Anchor />
    </Container>
  );
};

export default IconSection;

注意：useWindowSize 是一个获取宽度的自定义钩子，它工作正常，我对其进行了测试。