如何禁用 Material UI Link API 组件

Question

我之前使用的是 Material UI 的 Button 组件，它具有禁用属性。基本上，该属性允许根据布尔值禁用按钮。因此，如果为真，则它被禁用。但是，现在我想切换到 Material UI Link 组件，它也是一个按钮，但它看起来像一个文本。它的作用与按钮相同，但看起来像一个链接。但是，它没有禁用属性，或者似乎是因为我在 Material UI 文档中没有将其视为可能的属性。有解决办法吗？

*注意 - 这不是来自 React Router Dom 库。我正在使用 Material UI Library for React 的链接。这样就不会造成混乱。

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

Answer 1

Material-UI默认Link呈现为元素。如果您希望它呈现为 a （这在您指定和不指定时是合适的），那么您需要指定。完成此操作后，该道具将按预期工作，但需要注意的是，Material-UI没有任何“禁用”外观的样式；因此，如果您希望链接在禁用时看起来有所不同，则需要自定义该状态的样式。<a><button>onClickhrefcomponent="button"disabledLink

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

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