Не уверен, почему MultiSelect Styling не соответствуют ожиданиям - Material UI - PullRequest
0 голосов
/ 28 октября 2018

Не уверен, почему мой стиль MultiSelect немного не в порядке.100

Перед выбором чего-либо: 1 После выбора некоторых параметров: 2

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 });
    }
}

1 Ответ

0 голосов
/ 28 октября 2018

Я не могу понять причину проблемы, но я выясняю решение.По какой-то причине svg, используемый в select, имеет position: relative;, тогда как в моем случае должно быть position: absolute;.Не уверен, почему ...

Добавление стилизованного компонента, кажется, работает для меня,

const FormControlSyle = styled(FormControl)`
    & svg {
        position: absolute;
    }
`;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...