ReactJS MUI v5从withWidth迁移至useWidth的实现问题咨询

适配步骤 #

• 替换原有导入：将withWidth相关导入替换为 v5 提供的useWidthHook，注意 MUI v5 包名已统一从@material-ui/core更新为@mui/material
• 组件内调用Hook获取宽度断点：直接在函数组件内部调用useWidth()即可获取当前宽度对应的断点值，原有isWidthUp判断逻辑可完全复用
• 移除HOC包装：导出组件时不再需要withWidth()包裹，直接导出原生函数组件即可

完整修改后代码 #

import { Grid, GridList } from "@mui/material";
import { useWidth } from "@mui/material/useMediaQuery";
import { isWidthUp } from "@mui/material/styles";

import {
  ExtraTile,
  ExtraDiv,
  ExtraDescriptionText,
  ExtraPriceText,
} from "components/Extras/components/ExtraTiles";

import {
  SwitchExtra,
  SwitchExtraImage,
  SwitchTextDiv,
  SwitchDiv,
} from "components/Extras/components/SwitchExtraTiles";

function ExtraSwitchComponent(props) {
  // 调用useWidth获取当前宽度断点
  const width = useWidth();

  return (
    <GridList
      cellHeight={isWidthUp("md", width) ? 100 : 200}
      cols={1}
      spacing={0}
    >
      <ExtraTile
        style={{ cursor: "auto" }}
        key={props.type + "-tile"}
        cols={1}
        component="div"
      >
        <ExtraDiv>
          <Grid
            container
            direction="row"
            justifyContent="space-between"
            style={{ height: "100%" }}
          >
            <Grid
              item
              xs={isWidthUp("md", width) ? 4 : 12}
              style={{ height: isWidthUp("md", width) ? "100%" : "33%" }}
            >
              <SwitchExtraImage
                src={props.imageUrl}
                alt={props.imageAlt}
                topRight={isWidthUp("md", width) ? "0px" : "10px"}
                bottomLeft={isWidthUp("md", width) ? "10px" : "0px"}
              />
            </Grid>
            <Grid
              item
              xs={isWidthUp("md", width) ? 4 : 12}
              style={{ height: isWidthUp("md", width) ? "100%" : "33%" }}
            >
              <Grid
                container
                alignItems="center"
                style={{ height: "100%", width: "100%" }}
              >
                <Grid item xs={12} style={{ width: "100%", height: "50%" }}>
                  <ExtraDescriptionText>
                    {props.description}
                  </ExtraDescriptionText>
                </Grid>
                <Grid item xs={12} style={{ width: "100%", height: "50%" }}>
                  <ExtraPriceText>
                    {"+ " + props.price + props.priceDescriptor}
                  </ExtraPriceText>
                </Grid>
              </Grid>
            </Grid>
            <Grid
              item
              container
              xs={isWidthUp("md", width) ? 4 : 12}
              style={{ height: isWidthUp("md", width) ? "100%" : "33%" }}
              alignItems="center"
              justify="center"
              direction="column"
            >
              <SwitchExtra
                checked={props.selected}
                onChange={props.setSelected}
                color="primary"
              />
            </Grid>
          </Grid>
        </ExtraDiv>
      </ExtraTile>
    </GridList>
  );
}

// 移除withWidth HOC包装
export default ExtraSwitchComponent;

补充说明 #

MUI v5 中原GridList组件已更名为ImageList，如果需要长期维护建议同步替换该组件的导入和使用。如果你的项目临时保留了旧版@material-ui/core兼容包，也可以仅修改Hook相关的导入和调用逻辑，无需调整其他组件导入路径。

内容的提问来源于stack exchange，提问作者Pol Valls Ortiz