Ways to pass multiple classes in react!!!

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> 

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)}>