如何使用材料设计将图标与选择控件对齐？答案

【问题标题】：How to align Icon with select control using Material design?如何使用材料设计将图标与选择控件对齐？
【发布时间】：2020-04-30 14:41:10
【问题描述】：

我是 Material Design UI 组件的新手，并且正在努力解决真正的基本对齐问题。

我有一个选择控件，它使用一个图标作为下拉菜单，然后在它旁边使用另一个图标来取消操作。

这是页面的 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'等。但没有对齐它们。

如果我将选择组件更改为只是一个图标，那么这两个图标会正确对齐。

我错过了什么？

【问题讨论】：

标签： reactjs material-design material-ui

【解决方案1】：

使用 alignItems: 'center' 代替 alignContent: 'center'。这是一个演示：

【讨论】：

我现在很困惑。我可以看到您的演示/示例正在运行...但是，当我在系统中使用完全相同的代码时，它不会对齐呈现？我在 IE 中打开了相同的页面，只是想看看它是否是一些缓存问题，它也没有对齐。
尝试使用 ... 代替具有内联样式的 div。这是唯一的代码吗？还是在其他组件内部？
谢谢，我稍后会试一试。目前，我已经删除了 Material UI 框架并坚持使用语义框架，因为我没有遇到过这样的问题。