reactjs - 如何启用禁用列表项中的按钮

Question

我有一个禁用的列表项，其中包含一个我想要启用的按钮。

父级上的Mui-disabled课程一直禁用一切。

有没有办法覆盖这个？

标签： reactjsmaterial-ui

Answer 1

ListItemButtonwhich is disabled 已pointer-events设置为，none因此您无法单击其中的任何内容。要解决该问题，请再次覆盖您的内部按钮：

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}