使用图标和文本（React Material-UI）防止 Select 中换行的最佳方法

Question

我有一个带有 ListItemIcon 和 ListItemText 的 Select。

选择 select 时会出现换行符。

我发现了几种避免这种行为的技巧，但我想知道正确的方法。

前

后

代码沙盒： https://codesandbox.io/s/select-icon-test-6jbseg?file=/src/App.js

代码：

function SelectIconTest() {
    const [selectOption, setSelectOption] = useState('0')

    function handleChange(e) {
        setSelectOption(e.target.value);
      }

    return (
        <>
            <InputLabel id="label-select-icon">Select with icon</InputLabel>
            <Select labelId="label-select-icon" id="select-select-icon" name="selectIcon" value={selectOption} onChange={handleChange}>
                <MenuItem value="0">
                    <em>None</em>
                </MenuItem>
                <MenuItem value="1" key="1">
                    <ListItemIcon>
                        <AccountBalanceIcon />
                    </ListItemIcon>
                    <ListItemText disableTypography primary="Bank" />
                </MenuItem>
            </Select>
        </>
    );
}

Answer 1

以 MUI 方式

在 sx 道具中试试这个

sx={{
    '&> div': {
        display: 'flex'
    }
}}

我们也在使用 MUI，这就是我们导航特定容器的方式

这是示例代码