reactjs - Material-UI:仅禁用 Chip 的操作图标

Question

我想禁用芯片的 (x)。不是整个组件，尝试设置禁用将禁用整个组件。

我怎样才能做到这一点？

基于我尝试过的 Paven 答案

import Chip from '@material-ui/core/Chip';
import CancelIcon from '@material-ui/icons/Cancel';
import FaceIcon from '@material-ui/icons/Face';

{agent.assignedBots.map(assignedBot => {
   return (
     <Chip
       key={assignedBot.id}
       icon={<FaceIcon />}
       label={assignedBot.name}
       onDelete={() =>
          onRemoveBotHandler(agent.id, assignedBot.id)
       }
       color="secondary"
       deleteIcon={
       <CancelIcon
         disabled={
          (state.removedBot.id == assignedBot.id &&
            state.removedBot.disabled) ||
          assignedBot.isRunning
          }
        />
       }
    />
  );
})}

但运气不好。

Answer 1

CancelIcon 只是一个 svg 元素，它没有 disabled 属性。如果您想禁用它，请将图标包裹在 IconButton 内，并将 disabled 设置为 true:

<Chip
  onDelete={handleDelete}
  deleteIcon={
    <IconButton disabled>
      <CancelIcon />
    </IconButton>
  }
/>

现场演示