[FIXED] How to enable a button in a disabled list item

Issue

I have a disabled list item that contains a button that I want enabled.

The Mui-disabled class on the parent disabled everything all the way down.

Is there a way to override this?

Solution

The ListItemButton which is disabled has the pointer-events set to none so you can't click anything inside. To resolve that override your inner button again:

V5

import Button, { buttonClasses } from "@mui/material/Button";

<List
  sx={{
    [`&& .${buttonClasses.disabled}`]: {
      opacity: 1,
      // anything that's not a button inside ListItem
      [`& > :not(.${buttonClasses.root})`]: {
        opacity: (theme) => theme.palette.action.disabledOpacity
      },
      // inner button
      [`& > .${buttonClasses.root}`]: {
        pointerEvents: "auto"
      }
    }
  }}
>

V4

const useStyles = makeStyles(theme => ({
  list: {
    '&& .Mui-disabled': {
      opacity: 1,
      '& > :not(.MuiButton-root)': {
         opacity: theme.palette.action.disabledOpacity
      },
      '& > .MuiButton-root': {
         pointerEvents: "auto"
      },
    },
  }
}));

<List className={classes.list}

Answered By - NearHuscarl
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)