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

Question

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

Answer 1

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

---

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

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

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

如果您将它与函数组件一起使用，那么我建议您使用 Hook API (makeStyles)。与 makeStyles 相比，withStyles 有一些额外的开销(并且在内部委托(delegate)给 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);

---

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