Material-UI - Why should I use makeStyles instead of inline styles?

Question

In Material-UI, there is the makeStyles function which can be used to get custom CSS-Styling.

Should I use it if I am not using a theme in that specific

Answer 1

There are a few scenarios where using CSS classes (e.g. via makeStyles or withStyles) is necessary:

• If you want to use media queries in your CSS
• If you want to target pseudo-classes (e.g. :hover)
• If you are creating a reusable customization of one of the Material-UI components and want to customize some of the classes that are conditionally applied to the element based on props or some other context (e.g. if you want to customize the "error" look of an Input while leaving it up to the places where the custom component is used to specify the error prop either directly or via the FormControl context)

As far as performance concerns, I would expect inline styles to be faster for most use cases. Whether the difference is enough to matter would depend on a lot of specifics regarding your particular application. The team I work with uses makeStyles or withStyles for most of our styling.

Inline styles can result in a lot of duplicated CSS in the DOM if a particular component is rendered many times within the document (e.g. list items, table cells, etc.). One nice thing about always using classes is that you can change the CSS for the class in the browser's developer tools and see that change applied throughout all its usages in the document.