What is the benefit of using withStyles over makeStyles?

Question

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

Answer 1

UPDATE This question/answer is geared towards v4 of Material-UI. I have added some v5 info/links at the end.

---

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

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

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

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).

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.

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);

---

For v5 of Material-UI, styled replaces withStyles and makeStyles. How to style Material-UI's tooltip? contains v5 examples. I also have further discussion of v5 styling options in Using conditional styles in Material-UI with styled vs JSS.

Answer 2

When should one use withStyles over makeStyles?

Probably never but here are some use (narrow) cases:

• you are running an react version that doesn't support hooks
• you are writing an material-ui library and want to support older mui versions (withStyles is older than makeStyles)
• you are running an older mui version
• you want to style an class based component, for instance if you are interested in the componentDidCatch lifecycle method.