Can makeStyles be passed as a prop?

Question

I have a component with a prop called styling. I pass inline styling here. I want to pass some styling I have written in makeStyles. The style I want to pass is:

const useStyles = makeStyles((theme) => ({
    fieldShape: {
        marginTop: "16px",
        [theme.breakpoints.up("md")]: {
            width: "625px",
        },
    },
}))

...
const classes = useStyles();

<MyComponent styling={classes.fieldShape}/>

...
// My Component
const { styling } = props
<TextField style={styling}/>

Answer 1

You are passing the return value of the hook, returned from makeStyles, not the makeStyles itself as you described in the title.

You can pass it as deep prop

the hook from makeStyles does not return object with styles, it returns object with class names (strings), so it should be:

<TextField className={styling}/>   // className instead of style