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

Question

我使用 MaterialUi 和 ReactTSX。当我导入芯片并显示它时。它在标签的右侧显示了 deleteIcon，但我希望它在框的右侧。 显示问题

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

Answer 1

通常，宽度Chip由其中内容的长度决定，删除图标的位置位于末尾，因为它是 Chip 内容的最后一部分。

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

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

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