can't pass props to material ui makeStyles - reactjs

Question

I have a form component with an input.
const CustomInput = (props) => {
const classes = useStyles(props);
return (
<FormControl className={classes.form}>
<Input
classes={{ input: classes.input, underline: classes.underline }}
/>
</FormControl>
);
};
In the useStyles I want to control the color of input underline (borderColor property) by setting it from the props:
const useStyles = makeStyles((theme) => ({
underline: (props) => ({
'&:hover:not($disabled):before,&:before': {
borderColor: '#D2D2D2 !important',
borderWidth: '1px !important'
},
'&:after': {
borderColor: theme.palette.secondary.main,
borderColor: props.borderColor
}
})
}));
However, when I do pass the property in another component App.js (shown below), it seems to be undefined and the color doesn't change. What am I missing here?
I have looked through similar questions here but still can't get it.
const useStyles = makeStyles((theme) => ({
underline: {
borderColor: theme.palette.secondary.main
}
}));
const App = () => {
const classes = useStyles();
return <CustomInput
labelText="Custom Input"
className={`${classes.underline}`}
inputStyles
/>
}

Answer 1

You may be mixing className with passing props to useStyles. What you could do in the App component is passing a borderColor prop to CustomInput:
const App = () => {
return (
<CustomInput labelText="Custom Input" borderColor="green" inputStyles />
);
};
If you want to override the child component's style with className, you have to pass the className as a prop and in the child component, add to its element's className:
const CustomInput = ({ className, borderColor }) => {
const classes = useStyles({ borderColor });
return (
<FormControl className={`${classes.form} ${className}`}> // <--
<Input classes={{ input: classes.input, underline: classes.underline }} />
</FormControl>
);
};
As a side note, you can access to the theme by using a function signature for makeStyles or check out Material UI useTheme hook. Docs