Обычно ширина 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
в качестве содержащего его элемента.