material-uireact-admin

Deactivate Pointer-Events of material-ui Edit Icon

I'm trying to deactivate the pointer-events on an material-ui Edit-Icon. (My goal is that 'the hand' dissappears when hovering over the icon.)

import EditIcon from '@material-ui/icons/Create';
import { Button} from 'react-admin';

      <Button 
       label="Edit" startIcon={<EditIcon style={{pointerEvents:'none'}}/>}></Button>

I added inline-styling, but that did not help. Thanks!

Solution

  • For Mui v5+ using emotion style engine, the following would do it. For earlier versions, substitute sx for your styling engine.

    import IconButton from '@mui/material/IconButton';
import EditIcon from "@mui/icons-material/Edit";

<IconButton sx={{ pointerEvents: "none", cursor: "not-allowed" }}>
  <EditIcon />
</IconButton>