React: How to combine multiple external makestyle using material ui? - reactjs

Question

I have multiple external makestyle that I want to combine. So, I can organize the style per component. The single makestyle is also good but the length of the file is too much.
I saw this on material ui documentation but it's not working
Makestyle
import useStyles from '../styles/style';
import useAddTaskStyles from '../styles/addTaskStyle';
const classes = useStyles();
const classesAddTask = useAddTaskStyles();
const className = clsx(classes, classesAddTask);
<Modal
className={className.modalContainer}
open={showAddTask}
onClose={handleCloseAddTask}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={showAddTask}>
<Tasks ref={useRef} />
</Fade>
</Modal>

Answer 1

import useStyles from '../styles/style';
import useAddTaskStyles from '../styles/addTaskStyle';
const classes = useStyles();
const classesAddTask = useAddTaskStyles();
<Modal
className={`${classes.modalContainer} ${classesAddTask.modalContainer}`}
open={showAddTask}
onClose={handleCloseAddTask}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={showAddTask}>
<Tasks ref={useRef} />
</Fade>
</Modal>;

Answer 2

You may combine it like this
const className = { ...classes, ...classesAddTask }
Codesandbox => https://codesandbox.io/s/nice-fire-xgvz2?file=/src/App.js
For Example (creating a useStyle hook that combines all style hooks)
import { makeStyles } from "#material-ui/styles";
const useStyles1 = makeStyles({
red: {
backgroundColor: "red"
}
});
const useStyles2 = makeStyles({
blue: {
backgroundColor: "blue"
}
});
const useStyles = () => {
const classes = useStyles1();
const classes2 = useStyles2();
return { ...classes, ...classes2 };
};
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className={classes.blue} style={{ width: "200px", height: "200px" }}>
blue box
</div>
<div className={classes.red} style={{ width: "200px", height: "200px" }}>
red box
</div>
</div>
);
}