使用 withStyles 比使用 makeStyles 有什么好处？

Question

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

Answer 1

更新此问题/答案面向 Material-UI 的 v4。我在最后添加了一些 v5 信息/链接。

所述钩API（makeStyles/useStyles）只能与功能的部件使用。

的高次成分API（withStyles）可与类组件或功能的部件使用。

它们都提供相同的功能，并没有在无差异styles的参数withStyles和makeStyles。

如果您将它与函数组件一起使用，那么我建议您使用 Hook API ( makeStyles)。withStyles与makeStyles（和内部委托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。如何设计 Material-UI 的工具提示？包含 v5 示例。我还在Using conditional styles in Material-UI with styled vs JSS 中进一步讨论了 v5 样式选项。

Answer 2

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

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

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