如何在函数式组件中同时使用withWidth与withStyles高阶组件？

首先修正导入语句的笔误，你代码里的widthStyles是拼写错误，正确的样式HOC导入名为withStyles：

import { withStyles, withWidth } from "@material-ui/core";

你当前的导出写法使用了逗号操作符，执行时只会保留最后一个表达式withStyles(style)的返回值，相当于仅给组件套了withStyles一个HOC，withWidth()的调用结果被直接丢弃，自然无法获取到width属性。

解决方案 #

方法1：直接嵌套调用HOC

适合HOC数量较少的场景，按顺序嵌套包裹组件即可：

export default withWidth()(withStyles(style)(func));

方法2：用compose组合多个HOC

如果需要组合的HOC数量较多，推荐用compose工具简化写法，避免多层嵌套导致的可读性问题。
Material UI v4及以上版本内置了compose，直接导入使用即可：

// 导入新增compose
import { withStyles, withWidth, compose } from "@material-ui/core";

// 导出时组合多个HOC
export default compose(
  withWidth(),
  withStyles(style)
)(func);

compose会按从右到左的顺序执行HOC，和嵌套调用的效果完全一致。

拓展说明（可选） #

如果你的项目支持React Hooks，也可以用Hook替代HOC实现相同能力，写法更简洁直观：

• 用makeStyles + useStyles替代withStyles获取样式类
• 用useTheme + useMediaQuery替代withWidth判断当前断点

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