spread common style in makeStyles (Typescript) - material-ui

Question

I need to spread common style across multiple styling inside makeStyles. This works for my jsx, but give errors when i move to tsx.
const abc = {
fontWeight: 600,
textTransform: 'uppercase',
}
const useStyles = makeStyles(() => ({
abcAdd: {
...abc,
color: '#B25846';
},
}))

Answer 1

If the object is declared in TypeScript, set its type to CSSProperties
import { CSSProperties } from "#material-ui/core/styles/withStyles";
const abc: CSSProperties = {
fontWeight: 600,
textTransform: 'uppercase',
}
Or, if the object came from JavaScript, cast it to CSSProperties
import { CSSProperties } from "#material-ui/core/styles/withStyles";
import { abc } from "./some/path/to/javascript";
const useStyles = makeStyles(() => ({
abcAdd: {
...abc as CSSProperties,
color: '#B25846',
},
}))

Answer 2

I found a simple workaround - add 'any' as type of callback function
const abc = {
fontWeight: 600,
textTransform: 'uppercase',
}
const useStyles = makeStyles((): any => ({
abcAdd: {
...abc,
color: '#B25846';
},
}))
And when you use the class, call it in quotes:
const classes = useStyles()
return (
<Box className={classes['abcAdd']}>
)
This way works for me and there are no errors from TS compiler.
I am sure, there could be a better solution, maybe you need to define some advanced type for callback. But it requires advanced knowledge of typescript, I'm not so experienced in it.
Any better solutions - welcome!

Answer 3

What about if you use #ts-ignore on that line?

Answer 4

There is no need to spread JSON inside makeStyles. There could be only one reason why you may want to spread it because you want to keep comment CSS in one file.
Simply make one comment file for common css:
import {
makeStyles,
} from '#material-ui/core';
const useCommonStyles = makeStyles(() => ({
abcAdd:{ fontWeight: 600,
textTransform: 'uppercase',}
}));
export default useCommonStyles;
And use it like this anywhere
import useCommonStyles from "src/utils/commonStyles";
const commonClasses = useCommonStyles();