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

Question

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

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

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

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

Answer 1

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

然后将 <Icons /> 传递给 Chip 组件的 deleteIcon 属性。您还必须具有 onDelete 属性才能显示。

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 />}
/>;

更新

刚刚意识到您可能想要 DoneIcon 的不同 onClick 处理程序而不是删除。我以前的解决方案意味着单击 DoneIcon 也会运行 handleDelete 功能。

一个 Chip 可以有一个 label、icon 和 deleteIcon 属性。它从左到右按以下顺序出现：icon、label 和 deleteIcon.

如果您检查开发工具中的 Chip 组件，您会看到 Chip 根组件是一个包含这三个元素的 div，即 svg 的 icon，span 的 label 和 svg 的 deleteIcon。 div 有 CSS 属性 display: inline-flex，这意味着这三个元素是弹性项目，可以重新排序。在此处阅读有关订购弹性商品的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

为此，我们必须修改 Chip 的现有样式。为此，我们使用 makeStyles 创建自定义样式并将其应用于 Chip 组件的 root class。

您还可以向要传递给 icon 道具的组件添加一个 onClick 处理程序。在本例中，它是 <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)} />}
    />
  )
}

结果

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

Is there any way to display a close icon and tick icon together in material ui chip component

customization

label

reactjs

material-ui

google-material-icons