使用圖標和文本（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，這就是我們導航特定容器的方式

這是示例代碼