ACTUALIZAR Esta pregunta/respuesta está orientada a v4 de Material-UI. He agregado información/enlaces de v5 al final.

La API Hook ( makeStyles/useStyles ) solo se puede usar con componentes de funciones.

La API de componente de orden superior ( withStyles ) se puede usar con componentes de clase o componentes de función.

Ambos brindan la misma funcionalidad y no hay diferencia en el parámetro de styles para withStyles y makeStyles .

Si lo está usando con un componente de función, le recomendaría usar la API Hook ( makeStyles ). withStyles tiene un poco de sobrecarga adicional en comparación con makeStyles (e internamente delegados a makeStyles ).

Si está personalizando los estilos de un componente Material-UI, es preferible usar withStyles que envolverlo con su propio componente únicamente con el fin de llamar a makeStyles/useStyles , ya que entonces solo estaría reimplementando withStyles .

Por lo tanto, envolver un componente Material-UI podría parecerse al siguiente ejemplo (de ¿Cómo aplicar estilo a la información sobre herramientas de Material-UI? ):

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

Para v5 de Material-UI, styled reemplaza a withStyles y makeStyles . ¿Cómo diseñar la información sobre herramientas de Material-UI? contiene ejemplos v5. También tengo una discusión más detallada sobre las opciones de estilo v5 en Uso de estilos condicionales en Material-UI con estilo vs JSS .

¿Cuándo se debe usar withStyles sobre makeStyles?

Probablemente nunca, pero aquí hay algunos casos de uso (estrechos):

• está ejecutando una versión de reacción que no admite ganchos
• está escribiendo una biblioteca material-ui y desea admitir versiones anteriores de mui (withStyles es más antiguo que makeStyles)
• está ejecutando una versión anterior de mui
• desea diseñar un componente basado en clases, por ejemplo, si está interesado en el método de ciclo de vida de componentDidCatch .