有没有办法在 Material ui 芯片组件中同时显示关闭图标和勾选图标

Question

Material ui 芯片组件文档一次显示一个关闭图标或完成图标。有什么办法可以同时显示两者

  <Chip
    label="name"
     onDelete={handleDelete}
     />

我尝试添加 DoneIcon ，但它显示在左侧。我希望 DoneIcon 和删除图标都在芯片内标签的右侧。

     <Chip
    label="name"
     onDelete={handleDelete}
     icon={<DoneIcon/>}
     />

Answer 1

是的，试试这个。创建一个包含这两个图标的组件。我创建了一个名为Icons它的基本版本div，其中包含DoneIcon和CancelRoundedIcon。

然后传入组件的 prop<Icons />中。您还必须拥有展示此内容的道具。deleteIconChiponDelete

import Chip from "@material-ui/core/Chip";
import DoneIcon from "@material-ui/icons/Done";
import CancelRoundedIcon from "@material-ui/icons/CancelRounded";

const Icons = () => (
  <div>
    <DoneIcon />
    <CancelRoundedIcon />
  </div>
);

<Chip
  label="Basic"
  variant="outlined"
  onDelete={handleDelete}
  deleteIcon={<Icons />}
/>;

更新

刚刚意识到您可能需要一个不同的onClick处理程序来DoneIcon代替删除。我之前的解决方案意味着单击DoneIcon也将运行该handleDelete功能。

AChip可以有label,icon和deleteIcon属性。它按从左到右的顺序出现：icon、label和deleteIcon。

如果您Chip在开发工具中检查该组件，您将看到Chip根组件是 a div，其中包含这三个元素，即svgof the icon、spanfor thelabel和svgfor the deleteIcon。具有divCSS属性display: inline-flex，这意味着这三个元素是弹性项目并且可以重新排序。阅读有关订购弹性项目的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

为此，我们必须修改Chip. 我们通过使用创建自定义样式makeStyles并将其应用到组件root的类来实现此目的Chip。

您还可以onClick向要传递给 prop 的组件添加处理程序icon。在本例中，它是<DoneIcon />.

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  chipRoot: {
    "& .MuiChip-icon": {
      order: 1, // the label has a default order of 0, so this icon goes after the label
      marginRight: "10px", // add some space between icon and delete icon
      cursor: "pointer"
    },
    "& .MuiChip-deleteIcon": {
      order: 2 // since this is greater than an order of 1, it goes after the icon
    }
  }
});

const MyComponent = () => {

  const classes = useStyles();

  const handleClick = (e) => {
    // do something
  }
  
  return (
    <Chip
      classes={{
        root: classes.chipRoot
      }}
      label="Label"
      variant="outlined"
      onDelete={handleDelete}
      deleteIcon={<CancelRoundedIcon />}
      icon={<DoneIcon onClick={(e) => handleClick(e)} />}
    />
  )
}

结果