每个都有不同的用例吗?什么时候应该使用 withStyles 而不是 makeStyles?
最佳答案
更新 此问题/答案适用于 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 样式选项。 .
关于css - 使用 withStyles 比使用 makeStyles 有什么好处?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57697664/