与 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？

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

【讨论】：