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 CSS?

For example:

import React from "react";
import { TextField, Paper, Button, Box } from "@material-ui/core";

const classes = {
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
       marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
};

const Ohne = () => {
  console.log(classes);
  return (
      <Paper style={classes.paper}>
      <Box>
          <TextField style={classes.textField} />
          <Button style={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Ohne;

The object was:

{
    "paper": {
        "backgroundColor": "#eee",
        "marginLeft": "30%",
        "marginRight": "30%"
    },
    "textField": {
        "backgroundColor": "#fff"
    },
    "button": {
        "backgroundColor": "green",
        "marginLeft": 20
    }
}

vs

import React from "react";
import { makeStyles } from "@material-ui/styles";
import { TextField, Paper, Button, Box } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  paper: {
      backgroundColor: "#eee",
      marginLeft: "30%",
      marginRight: "30%"
  },
  textField: {
      backgroundColor: "#fff"
  },
  button: {
      backgroundColor: "green",
      marginLeft: 20
  }
}));

const Mit = () => {
  const classes = useStyles();
  console.log(classes);
  return (
      <Paper className={classes.paper}>
      <Box>
          <TextField className={classes.textField} />
          <Button className={classes.button}>abc</Button>
      </Box>
      </Paper>
  );
};

export default Mit;

The object was:

{
    "paper": "makeStyles-paper-85",
    "textField": "makeStyles-textField-86",
    "button": "makeStyles-button-87"
}

So there are 3 main points (that I see):

1. One way creates classes and references them, the other just uses the object as is.
2. In the first case an object is assigned to the style property which is inline and has a higher priority.
3. In the first example it is important to keep the const outside of the class, so the object is still created only once and won't trigger a rerender.

But the resulting component looks identical (in my Firefox).

My questions:

• Can an example be constructed where these two approaches result in different controls?
• Is there any performance aspect to it?
• Any other differences?

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.