How to disable the Material UI Link API component

user_15639505 0
Viewed 6249

I was previously using Material UI's Button component, which has the disable property. Basically that prop allows the button to be disabled based on a boolean. So if true, then it is disabled. However, now I want to switch to the Material UI Link component which is also a button, but it looks like a text. It does the same thing a button does, but looks like a link. However, it does not have the disable property or it seems because I dont see it as a possible property in the Material UI docs. Is there any work around for this?

*Note - This is not from the React Router Dom library. I am using the Link from Material UI Library for React. Just so there is no confusion.

<Link
  hover
  underline="hover"
  variant="body2"
  onClick={
    this.buyAll
  }>
Buy All Products
</Link>
material-ui reactjs css javascript
2 Answers

Material-UI's Link renders as an <a> element by default. If you want it to render as a <button> (which would be appropriate when you are specifying onClick and not specifying href), then you need to specify component="button". Once you have done that, the disabled prop will work as expected with the caveat that Material-UI's Link doesn't have any styling for a "disabled" look; so if you want the link to look different when it is disabled, you will need to customize the styles for that state.

Below is a working example including some sample disabled styling:

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

Edit Disabled Link/button

user_74959300

Thank @RyanCogswell. I tried to improve his answer by defining a custom theme, based on MUI's default theme and using pointer-events: none:

import { createTheme } from '@mui/material/styles'

const { palette } = createTheme() // MUI's default theme

const theme = createTheme({ // Our app's custom theme
  MuiLink: {
    styleOverrides: {
      root: {
        '&[disabled]': {
          color: palette.action.disabled,
          pointerEvents: 'none',
        },
      },
    },
  },
})

import { Link } from '@mui/material'

//...

<Link
  disabled
  to='https://stackoverflow.com/a/72479343/5318303'
>
  Disabled link
</Link>
user_53183030
Related