与makeStyles一起使用withStyles有什么好处? [英] What is the benefit of using withStyles over makeStyles?

问题描述

每种情况都有不同的用例吗?什么时候应该在makeStyles上使用withStyles?

Are there different use cases for each? When should one use withStyles over makeStyles?

推荐答案

Hook API (makeStyles/useStyles)仅可用于功能组件.

The Hook API (makeStyles/useStyles) can only be used with function components.

高级组件API ()可以与类组件或功能组件一起使用.

The Higher-order component API (withStyles) can be used with either class components or function components.

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

They both provide the same functionality and there is no difference in the styles parameter for withStyles and makeStyles.

如果将其与功能组件一起使用，则建议使用Hook API(makeStyles).与makeStyles(以及内部委托给makeStyles)相比，withStyles有点额外的开销.

If you are using it with a function component, then I would recommend using the Hook API (makeStyles). withStyles has a little bit of extra overhead compared to makeStyles (and internally delegates to makeStyles).

如果您要自定义Material-UI组件的样式，则仅出于调用makeStyles/useStyles的目的，使用withStyles比将其包装到自己的组件中更为可取，因为那样的话，您将只是重新实现withStyles

If you are customizing the styles of a Material-UI component, using withStyles is preferable to wrapping it with your own component solely for the purpose of calling makeStyles/useStyles since then you would just be re-implementing withStyles.

因此包装Material-UI组件可能类似于以下示例(来自

So wrapping a Material-UI component might look like the following example (from How to style Material-UI's tooltip?):

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

这篇关于与makeStyles一起使用withStyles有什么好处?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！