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