Ways to pass multiple classes in react!!!

By passing props

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={`${firstStyle} ${secondStyle}`}>
            {children}
        </div>
    )
}

export default MyComponent;
Now you can use it like:

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>

OffcialDocumentation

By clsx

First install it:

npm install --save clsx
Then import it in your component file:

import clsx from  'clsx';
Then use the imported function in your component:

<div className={ clsx(classes.class1, classes.class2)}>

OfficialDocumentation