css - 如何使用不会使选择变大的工具提示进行材质 UI 选择？

Question

我在 react 中有一个 material-ui 选择，如下所示：

<TextField
        fullWidth
        select
        id={'area'}
        label={'Area'}
        value={DCA.area ? DCA.area : ''}
        variant={TEXT_FIELD_VARIANT_TYPE}
        onChange={(evt) => handleValueChange(evt, 'area')}
        >

        { Object.keys(dcaData[DCA.domain][DCA.category]).map(selectKey =>
                <Tooltip key={"Area_MenuItem_Tooltip_" + selectKey} title={dcaData[DCA.domain][DCA.category][selectKey]}  value={selectKey} >
                        <MenuItem  key={"Area_MenuItem_Tooltip_" + selectKey} value={selectKey} >{selectKey}</MenuItem>
                </Tooltip>
                            )}

</TextField>

这是功能性的。

问题是它旁边有一个相同的选择。该选择没有工具提示。当您添加工具提示时，一切都按预期工作......除了选择选择时，文本字段的高度会发生变化。

我尝试添加style={{padding:'0px'}}到 TextField、Tooltop 和 MenuItem。当添加到 Tooltip 或 MenuItem 时，它会有所帮助（但不能完全解决问题），但“下拉”弹出菜单也没有填充，并且与其他选择的样式不匹配。

我可以做些什么来添加工具提示，但保持“折叠”/选定的 TextField 不会改变它的大小？

标签： cssreactjsmaterial-ui