Как выровнять Icon с выбором элемента управления, используя дизайн материала?

Question

Я новичок в компонентах пользовательского интерфейса дизайна материалов и борюсь с реальным базовым c вопросом о выравнивании.

У меня есть элемент управления select, который использует значок для выпадающего меню, а затем прямо рядом с ним другой значок отменить действие.

Вот все, что находится в render () части страницы:

             <div style={{display:'flex', alignContent:'center'}}>
            <Select  IconComponent={ArrowDropDownCircleOutlined}  disableUnderline={true} 
                      renderValue={() => { return ('') }}>
                                <MenuItem value={'contains'}>Contains</MenuItem>
                                <MenuItem value={'startswith'}>Starts with</MenuItem>
                                <MenuItem value={'EqualTo'}>Equal to</MenuItem>
                                <MenuItem value={'isNull'}>is Null</MenuItem></Select>

                             <CancelOutlined onClick={() => console.log('hello world')} />
        </div>

это то, что отображается:

Я пробовал различные изменения стиля: verticalAlign: 'middle', 'top', 'buttom' и т. Д. c .. но ничто не выравнивает их.

Если я изменил компонент select только на Значок, однако два значка выровнены правильно.

Чего мне не хватает?

Answer 1

Вместо alignContent: 'center' используйте alignItems: 'center'. Вот демонстрация, где это работает: