Material-ui [Chip] 悬停显示删除图标答案

【问题标题】：Material-ui [Chip] On hover show delete iconMaterial-ui [Chip] 悬停显示删除图标
【发布时间】：2021-03-05 18:03:53
【问题描述】：

我一直在尝试获取芯片的悬停属性。所需的响应应该是，当我将鼠标悬停在芯片阵列中的芯片上时，它应该显示删除图标。

我已附上 sn-p:-

  chip: {
    "&:hover": {
      backgroundColor: darken(
        theme.palette.primary.main,
        theme.palette.action.hoverOpacity * 3,
      ),
    },
  },
            <Chip
              className={classes.chip}
              key={i}
              label={tag.label}
              size="small"
              color={state.edit === false ? "primary"
                : tag.to_del ? "secondary"
                  : tag.is_new ? "primary"
                    : "default"}
              onDelete={state.edit === true ? ((e) => state.deleteTag(i)) : undefined}
              // onMouseEnter={}
              onMouseDown={(e) => e.preventDefault()}
            />

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

这是使用 CSS 在悬停时在芯片中显示删除图标的实现。

Working demo in codesandbox

const useStyles = makeStyles(() => ({
  chip: {
    "& .MuiChip-deleteIcon": {
      display: "none"
    },
    "&:hover": {
      "& .MuiChip-deleteIcon": {
        display: "block"
      }
    }
  }
}));

const classes = useStyles();

<Chip
  color="primary"
  label={data.label}
  onDelete={handleDelete(data)}
  className={classes.chip}
/>

【讨论】：

如果使用芯片 css 重载，这是更干净的方法。
不建议这样做，你是绕过组件的API，直接通过jss修改它的样式。随着 MUI 在 V5 期间从 jss 迁移到情感，这种方法将在未来被弃用。
@DavidI.Samudio 我只是在创建一个新的 CSS 类并将其传递给 Chip 组件。所以我觉得这种方法非常好，因为它不会覆盖芯片组件中的任何东西。此外，此示例与 Material UI 的下一个版本 (v5) 完美配合。
您没有将类传递给 MUI 组件，而是 HTML 组件，请尝试通过 classes 属性传递它们。全局选择器可能会更改（.MuiChip-deleteIcon"），修改它们（未来的 MUI 版本）可能会潜在地并且静默地破坏您的代码，并且是不必要的，因为显示/隐藏选项已经通过 API 可用。这不是关于代码的简洁性，而是关于代码的可维护性。

【解决方案2】：

你快到了，你只是缺少鼠标进入和离开绑定来处理你的删除逻辑：

  const [state, setState] = useState({ edit: false});
  const handleMouseEnter = () => setState(state=>({...state, edit: true }));
  const handleMouseLeave = () => setState(state=>({...state, edit: false }));

  <Chip
    // ...
    onMouseEnter={handleMouseEnter}
    onMouseLeave={handleMouseLeave}
  />;

我进行了更改以获得您正在寻找的行为（如上所示）：

https://codesandbox.io/s/chips-material-demo-forked-9f1u4?file=/demo.js

【讨论】：

谢谢。我明白了逻辑。但是我还有一个问题，如果芯片是一个数组然后是状态。 edit =true 将应用于所有芯片，这是不行的。删除图标显示在有悬停事件的地方。我怎样才能防止这种行为。
我已经修改了代码link
这完全是一个不同的问题，我对我的 pastebin 进行了更改以包含它。