不确定为什么 MultiSelect 样式不符合预期 - Material UI

Question

不知道为什么我的 MultiSelect 样式有点不对劲。

选择任何内容之前： 选择一些选项后：

const names = [
    "Oliver Hansen",
    "Van Henry",
    "April Tucker",
    "Ralph Hubbard",
    "Omar Alexander",
    "Carlos Abbott",
    "Miriam Wagner",
    "Bradley Wilkerson",
    "Virginia Andrews",
    "Kelly Snyder"
];
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
            width: 250
        }
    }
};

class SomeComponent extends Component<{}, {name: string[]}> {
    constructor(props: {}) {
        super(props);
        this.state = {name: []};
    }
    render(): ReactNode {
        return (
            <FormControl fullWidth={true}>
                <InputLabel htmlFor="select-multiple">Name of some random person</InputLabel>
                <Select
                    name="name"
                    multiple={true}
                    value={this.state.name}
                    onChange={this.handleMultiSelect}
                    input={<Input id="select-multiple" />}
                    fullWidth={true}
                    MenuProps={MenuProps}
                >
                    {names.map(name => (
                        <MenuItem key={name} value={name}>{name}</MenuItem>
                    ))}
                </Select>
            </FormControl>
        );
    }

    private handleMultiSelect = (event: any): void => {
        const newValue: string[] = event.target.value;
        this.setState({ name: newValue });
    }
}

Answer 1

我似乎无法找出问题的原因，但我找到了解决方案。出于某种原因，select 中使用的 svg 在我的情况下应该是 position: absolute; 时却有 position: relative;。不知道为什么...

添加样式组件似乎对我有用，

const FormControlSyle = styled(FormControl)`
    & svg {
        position: absolute;
    }
`;

不确定为什么 MultiSelect 样式不符合预期 - Material UI

Not sure why MultiSelect Styling are not as expected - Material UI

multi-select

material-ui