Как я могу установить значок с правой стороны коробки?

Question

Я использую MaterialUi и ReactTSX. Когда я импортирую чип и покажу его. Это показывает deleteIcon на правой стороне метки, но я хочу его на правой стороне окна. показать проблему

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

Answer 1

Обычно ширина Chip определяется длиной содержимого в нем, а положение значка удаления находится в конце, потому что это последняя часть содержимого чипа.

By устанавливая ширину на 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 root приводит к тому, что абсолютное положение значка удаления основывается на Chip в качестве содержащего его элемента.