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

Question

我使用MaterialUi和ReactTSX。 当我导入芯片并显示它时。 它在标签的右侧显示deleteIcon，但我想在框的右侧。 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" />
  );
}

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