CODEWITHSUNDEEP
reactjsmaterial-ui
sinnerwithguts
sinnerwithguts

Reputation: 693

can't pass props to material ui makeStyles

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

Upvotes: 1

Views: 3113

Answers (1)

hangindev.com
hangindev.com

Reputation: 4873

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

Edit cant-pass-props-to-material-ui-makestyles

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

Upvotes: 1

Related Questions