What is the benefit of using withStyles over makeStyles?
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.
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.