reactjs - 无法将道具传递给材质 ui makeStyles

Question

我有一个带有输入的表单组件。

const CustomInput = (props) => {
  const classes = useStyles(props);
  return (
    <FormControl className={classes.form}>
      <Input
        classes={{ input: classes.input, underline: classes.underline }}
      />
    </FormControl>
  );
};

在 useStyles 中，我想通过从道具设置来控制输入下划线（borderColor 属性）的颜色：

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

但是，当我在另一个组件中传递该属性时App.js（如下所示），它似乎是未定义的并且颜色没有改变。我在这里想念什么？我在这里查看了类似的问题，但仍然无法理解。

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

您可能正在className与传递道具混合到useStyles. 您可以在App组件中执行的操作是将borderColor道具传递给CustomInput：

const App = () => {
  return (
    <CustomInput labelText="Custom Input" borderColor="green" inputStyles />
  );
};

如果要使用 覆盖子组件的样式className，则必须将 className 作为 prop 传递，并在子组件中添加到其元素的 className：

const CustomInput = ({ className, borderColor }) => {
  const classes = useStyles({ borderColor });
  return (
    <FormControl className={`${classes.form} ${className}`}> // <--
      <Input classes={{ input: classes.input, underline: classes.underline }} />
    </FormControl>
  );
};

作为旁注，您可以通过使用函数签名访问主题makeStyles或查看 Material UIuseTheme钩子。文档