How to add multiple classes in React Material UI using the classes props?

Sometimes, we want to add multiple classes in React Material UI using the classes props.

In this article, we’ll look at how to add multiple classes in React Material UI using the classes props.

How to add multiple classes in React Material UI using the classes props?

To add multiple classes in React Material UI using the classes props, we can use the classnames package.

To install it, we run:

npm i classnames

Then we can use it by writing:

import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  container: {
    color: "blue"
  },
  yellow: {
    backgroundColor: "yellow"
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <div className={classNames(classes.container, classes.yellow)}>
      hello world
    </div>
  );
}

We call makeStyles with an object with the class names as the property names.

And we set each property to an object with the CSS styles as the value.

Next, we call useStyles to return the classes object.

And then we call classnames with the 2 classes properties that we created with makeStyles.

As a result, we should see that the text is blue and the background color is yellow.

Conclusion

To add multiple classes in React Material UI using the classes props, we can use the classnames package.