Javascript 如何禁用材质UI链接API组件

我以前使用的是MaterialUI的按钮组件，它具有disable属性。基本上，该道具允许基于布尔值禁用按钮。因此，如果为true，则它被禁用。但是，现在我想切换到MaterialUI链接组件，它也是一个按钮，但看起来像一个文本。它的功能与按钮相同，但看起来像一个链接。但是，它没有disable属性，或者似乎是因为我在MaterialUI文档中没有将其视为可能的属性。这方面有什么办法吗

*注意-这不是来自React Router Dom库。我正在使用来自材质UI库的链接进行React。这样就没有混乱了

<Link
  hover
  underline="hover"
  variant="body2"
  onClick={
    this.buyAll
  }>
Buy All Products
</Link>

购买所有产品

材质UI的

链接

呈现为。如果要将其呈现为

（当您指定

onClick

而不指定

href

时，这将是合适的），则需要指定

组件=“按钮”

。完成此操作后，

disabled

道具将按预期工作，但需要注意的是，材质UI的

链接

没有“disabled”外观的任何样式；因此，如果希望链接在禁用时看起来不同，则需要自定义该状态的样式

下面是一个工作示例，包括一些示例禁用样式：

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import MuiLink from "@material-ui/core/Link";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > * + *": {
      marginLeft: theme.spacing(2)
    }
  }
}));

const Link = withStyles({
  root: {
    "&[disabled]": {
      color: "grey",
      cursor: "default",
      "&:hover": {
        textDecoration: "none"
      }
    }
  }
})(MuiLink);

export default function Links() {
  const classes = useStyles();

  return (
    <Typography className={classes.root}>
      <Link component="button" onClick={() => console.log("hello")}>
        Link
      </Link>
      <Link
        component="button"
        disabled
        onClick={() =>
          console.log(
            "I'm disabled so this doesn't appear in the console when this is clicked."
          )
        }
      >
        Disabled Link
      </Link>
    </Typography>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“@material ui/core/Link”导入MuiLink；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles（（主题）=>({
根目录：{
"& > * + *": {
marginLeft：主题。间距（2）
}
}
}));
const Link=带有样式({
根目录：{
“&[禁用]”：{
颜色：“灰色”，
光标：“默认值”，
“&：悬停”：{
文本装饰：“无”
}
}
}
})（MuiLink）；
导出默认函数链接（）{
const classes=useStyles（）；
返回(
console.log（“hello”）}>
链接
console.log(
“我已被禁用，因此在单击此项时，此项不会显示在控制台中。”
)
}
>
禁用链接
);
}

---

这是否回答了您的问题@谢谢你的努力，但这并不能回答我的问题。他们在那篇文章中提到的链接来自React路由器Dom库。我所指的链接来自MaterialUILibrary@kenny229在这里，它是一个不同的

链接

组件并不重要，它仍然可以工作。在链接的帖子中尝试这个想法。