javascript - 如何禁用 Material UI Link API 组件

Question

我之前使用的是 Material UI 的 Button 组件，它具有 disable 属性。基本上，该 Prop 允许基于 bool 值禁用按钮。所以如果为真，那么它被禁用。但是，现在我想切换到 Material UI Link 组件，它也是一个按钮，但它看起来像一个文本。它的作用与按钮相同，但看起来像一个链接。但是，它没有 disable 属性，或者似乎是因为我不认为它是 Material UI 文档中可能的属性。有什么解决方法吗？
*注意 - 这不是来自 React Router Dom 库。我正在为 React 使用 Material UI Library 中的链接。就这样没有困惑。

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

Answer 1

Material-UI的Link呈现为 <a> element by default .如果您希望它呈现为 <button> (当您指定 onClick 而未指定 href 时这将是合适的)，那么您需要指定 component="button" .一旦你这样做了，disabled prop 将按预期工作，但需要注意的是 Material-UI 的 Link没有任何“禁用”外观的样式；因此，如果您希望链接在禁用时看起来有所不同，则需要自定义该状态的样式。
下面是一个工作示例，包括一些示例禁用样式:

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