无法将道具传递给材质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中，我想通过从props设置输入下划线（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

您可能正在混合export CC=clang export CXX=clang++ CFLAGS = "--target=mips64-linux-gnuabi64" ./configure --host=mips64-linux-gnuabi64 和传递道具到className。您在useStyles组件中可以做的就是将App道具传递给borderColor：

CustomInput

如果要使用const App = () => { return ( <CustomInput labelText="Custom Input" borderColor="green" inputStyles /> ); }; 覆盖子组件的样式，则必须将className作为prop传递，并在子组件中将其添加到其元素的className：

className

作为旁注，您可以使用const CustomInput = ({ className, borderColor }) => { const classes = useStyles({ borderColor }); return ( <FormControl className={`${classes.form} ${className}`}> // <-- <Input classes={{ input: classes.input, underline: classes.underline }} /> </FormControl> ); }; 的功能签名来访问主题，或签出Material UI makeStyles钩子。 Docs