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

【问题标题】：How can i set the icon fixed on the right side of the box?如何设置固定在框右侧的图标？
【发布时间】：2020-05-23 19:12:44
【问题描述】：

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

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

【问题讨论】：

如果您可以发布代码 sn-p，我们可以提供更多帮助。根据您提供的信息，我建议您查看 CSS 位置属性

标签： reactjs material-ui react-tsx

【解决方案1】：

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

通过将宽度设置为 70%，您将强制宽度大于问题图像中第二个芯片的内容。在这种情况下，您可以使用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 作为其包含元素。

【讨论】：