如何设置固定在框右侧的图标？

Question

我使用 Material Ui 和 React TSX。当我导入芯片并显示它时。它在标签的右侧显示了删除图标，但我希望它位于框的右侧。 show problem

<Chip
            key={item}
            label={item}
            onDelete={() => this.handleDelete.bind(this)(item)}
            variant="outlined"
            style={{width: '70%', }}
          />

Answer 1

一般Chip的宽度由里面内容的长度决定，删除图标的位置在最后，因为它是Chip内容的最后一部分。

通过将宽度设置为 70%，您强制宽度大于问题图像中第二个 Chip 的内容。在这种情况下，您可以使用 absolute positioning 确保删除图标位于右边缘，如下所示：

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";

const StyledChip = withStyles({
  root: {
    width: "70%",
    position: "relative"
  },
  deleteIcon: {
    position: "absolute",
    right: 0
  }
})(Chip);

export default function Chips() {
  const handleDelete = () => {
    console.info("You clicked the delete icon.");
  };

  return (
    <StyledChip label="deletable" onDelete={handleDelete} variant="outlined" />
  );
}

在 Chip 根上设置 position: "relative" 会导致删除图标的绝对定位基于 Chip 作为其包含元素。

如何设置固定在框右侧的图标？

How can i set the icon fixed on the right side of the box?

reactjs

material-ui

react-tsx