与 makeStyles 相比，使用 withStyles 有啥好处？

Posted 2023-02-22

【中文标题】与 makeStyles 相比，使用 withStyles 有啥好处？

【英文标题】：What is the benefit of using withStyles over makeStyles?与 makeStyles 相比，使用 withStyles 有什么好处？

【发布时间】：2020-01-01 23:48:14

【问题描述】：

每个都有不同的用例吗？什么时候应该使用 withStyles 而不是 makeStyles？

【参考方案1】：

更新 这个问题/答案是针对 Material-UI v4 的。我在最后添加了一些 v5 信息/链接。

---

Hook API (makeStyles/useStyles) 只能与函数组件一起使用。

Higher-order component API (withStyles) 可以与类组件或函数组件一起使用。

它们都提供相同的功能，styles 参数对于 withStyles 和 makeStyles 没有区别。

如果您将它与功能组件一起使用，那么我建议您使用 Hook API (makeStyles)。与makeStyles 相比，withStyles 有一点额外开销（并且在内部委托给makeStyles）。

如果您正在自定义 Material-UI 组件的样式，使用 withStyles 比使用您自己的组件包装它更可取，只是为了调用 makeStyles/useStyles，因为那时您将只是重新实现 withStyles .

因此，包装 Material-UI 组件可能类似于以下示例（来自 How to style Material-UI's tooltip?）：

const BlueOnGreenTooltip = withStyles(
  tooltip: 
    color: "lightblue",
    backgroundColor: "green"
  
)(Tooltip);

---

对于 Material-UI v5，styled 替换 withStyles 和 makeStyles。 How to style Material-UI's tooltip? 包含 v5 示例。我还在 Using conditional styles in Material-UI with styled vs JSS 中进一步讨论了 v5 样式选项。

【参考方案2】：

什么时候应该使用 withStyles 而不是 makeStyles？

可能永远不会，但这里有一些使用（狭义）案例：

您正在运行不支持挂钩的反应版本 您正在编写一个 Material-ui 库并希望支持较旧的 mui 版本（withStyles 比 makeStyles 旧） 您运行的是较旧的 mui 版本 您想要为基于类的组件设置样式，例如，如果您对 componentDidCatch 生命周期方法感兴趣。

【讨论】：

不错的 obs，但 “可能永远不会” 的原因是什么？

意味着，当您只为您的应用程序组件设置样式并且已经使用钩子时，您很可能也想在那里使用钩子，这意味着“makeStykes()”